相关疑难解决方法(0)
-webkit-overflow-scrolling:touch; Apple的iOS8中断了
我正在开发一个网络应用程序,它-webkit-overflow-scrolling:touch在几个地方使用,以提供溢出的divs惯性滚动.
自从更新到IOS8后,-webkit-overflow-scrolling: touch停止了你能够滚动的任何东西,到目前为止我能够解决这个问题的唯一方法是删除-webkit-overflow-scrolling: touch标准的粘性滚动.请帮忙!
以下是适用于iOS5,6和7的标准类之一的示例:
.dashboardScroll {
height: 100%;
overflow-x: hidden;
overflow-y: scroll;
-webkit-overflow-scrolling: touch; /*MAKES OVERFLOWN OBJECTS HAVE INERTIA SCROLLING*/
-webkit-transform: translateZ(0px); /*HELPS THE ABOVE WORK IN IOS5*/
}
推荐指数
解决办法
查看次数
JavaScript touchend与点击困境
我正在开发一些javascript UI,并使用很多触摸事件,如'touchend',以改善触摸设备的响应.然而,有一些逻辑问题困扰着我......
我已经看到许多开发人员在同一事件中混合'touchend'和'click'.在许多情况下它不会受到伤害,但基本上该功能会在触摸设备上触发两次:
button.on('click touchend', function(event) {
// this fires twice on touch devices
});
有人建议可以检测触摸功能,并适当设置事件,例如:
var myEvent = ('ontouchstart' in document.documentElement) ? 'touchend' : 'click';
button.on(myEvent, function(event) {
// this fires only once regardless of device
});
上面的问题是它会破坏支持触摸和鼠标的设备.如果用户当前正在双输入设备上使用鼠标,则"点击"将不会触发,因为仅为该按钮分配了"touchend".
另一个解决方案是检测设备(例如"iOS")并根据以下内容分配事件: 在iPad上的touchend上调用两次Click事件.当然,上面链接中的解决方案仅适用于iOS(不是Android或其他设备),而且似乎更像是一个"黑客"来解决一些非常基本的东西.
另一种解决方案是检测鼠标移动,并将其与触摸功能相结合,以确定用户是鼠标还是触摸.问题当然是当用户想要检测它时用户可能没有移动鼠标......
我能想到的最可靠的解决方案是使用简单的去抖功能来简单地确保该函数仅在短时间间隔内触发一次(例如100ms):
button.on('click touchend', $.debounce(100, function(event) {
// this fires only once on all devices
}));
我错过了什么,或者有没有人有更好的建议？
编辑:我在帖子后发现了这个链接,它提出了与上面类似的解决方案: 如何绑定'touchstart'和'click'事件但不回复两者？
推荐指数
解决办法
查看次数
iframe滚动iOS 8
我有一个iframe,我需要它有一个滚动溢出.它似乎在桌面上工作,我使用了一个解决方案,使其在iOS中工作.它现在适用于Android和iOS.但是,iOS8失败了.
<html>
<body>
<style type="text/css">
.scroll-container {
overflow: scroll;
-webkit-overflow-scrolling: touch;
}
#iframe_survey {
height: 100%;
}
.scroll-container {
height: 100%;
width: 100%;
overflow: scroll;
}
</style>
<div class="scroll-container scroll-ios">
<iframe id="iframe_survey" src="www.iframe.com" style="border:0px #FFFFFF none;" name="myiFrame" frameborder="0" marginheight="0px" marginwidth="0px" width="100%"></iframe>
</div>
</body>
推荐指数
解决办法
查看次数
iOS 11 WebKit iframe错误的解决方法
iOS WebKit iframe错误描述
iOS WebKit将iframe的大小调整为其内容的完整大小(见下图).这是一个自2016年以来已知的错误,但仍未在iOS 11中解决:https://bugs.webkit.org/show_bug.cgi？id = 155198
我目前的发现
1.对于固定的iframe内容(例如视频)
它足以在下面应用CSS,但它可以防止iframe内容滚动.
.fixed iframe {
width: 0;
height: 0;
min-width: 100%;
min-height: 100%;
}
2.对于可滚动的iframe内容(例如页面)
- 我们需要两个iframe容器:一个作为边界(固定大小),第二个作为滚动区域.
- 要适合iframe内容,其div容器必须以像素为单位定义w/h.任何相对度量(如%,vw/vh)都不起作用.
一些RWD页面(假设"不完整的RWD")正在经历iframe溢出(iframe不适合iframe容器).不幸的是,我们无法从iframe中解决这个问题并解决此问题,iframe中的文档至少需要:
Run Code Online (Sandbox Code Playgroud)body { max-width: 100vw !important; }或者,我们可以将iframe内容缩放为最后的手段.
因为2,为了保持容器比例,我们至少需要使用CSS媒体查询或JS来调整其高度.
一些不完整的解决方案:
- https://github.com/ampproject/amphtml/issues/11133
- https://www.spacevatican.org/2015/4/7/on-mobile-safari-and-iframes/
- Bootstrap Popover内容中的外部HTML文件
- 如何让IFrame在iOS Safari中响应？
- iFrame高度自动(CSS)
- iframe会根据内容自动调整高度而不使用滚动条？
- iframe滚动iOS 8
- iOS8 Safari -webkit-overflow-scrolling:touch; 问题
我的解决方法发布在答案中.
推荐指数
解决办法
查看次数