ios iOS5 -webkit-overflow-scrolling 导致触摸事件停止工作
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7763458/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
iOS5 -webkit-overflow-scrolling causes touch events stopping work
提问by user994778
when using [-webkit-overflow-scrolling: touch;], the scrolling area does work well, but it causes touch events stopping work out of the scrolling area. Is there anyone had the same problem? Who can give me some official links about this new scrolling feature?
使用 [ -webkit-overflow-scrolling: touch;] 时，滚动区域运行良好，但会导致触摸事件停止滚动区域外的工作。有没有人有同样的问题？谁能给我一些关于这个新滚动功能的官方链接？
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ios5 scroll</title>
<style type="text/css">
header {
background: red;
width: 300px;
height:44px;
}
.scroll {
width: 300px;
height:300px;
background: yellow;
overflow: scroll;
-webkit-overflow-scrolling: touch;
}
</style>
</head>
<body>
<div id="container">
<header>
<button onclick="alert('header');">won't work?</button>
</header>
<div class="scroll">
<button onclick="alert('scroll');">It works</button>
<div>text</div><div>text</div><div>text</div><div>text</div><div>text</div><div>text</div><div>text</div>
<div>text</div><div>text</div><div>text</div><div>text</div><div>text</div><div>text</div><div>text</div>
<div>text</div><div>text</div><div>text</div><div>text</div><div>text</div><div>text</div><div>text</div>
</div>
</div>
</body>
</html>
2011-12-27: I have fixed this problem but I still no wonder the real reason. In my case, I have several sections in one web page, each section has a scroll area and a header, each time only one section is showed and use css3 animation combined with transform to switch sections. when add [-webkit-overflow-scrolling] in the scroll area of all sections, touch events stop working randomly, so I just add [-webkit-overflow-scrolling] in the section which is showed currently and remove it when the section is hidden. That works well but I still don't know what causes this problem.
2011-12-27：我已经解决了这个问题，但我仍然不知道真正的原因。就我而言，我在一个网页中有几个部分，每个部分都有一个滚动区域和一个标题，每次只显示一个部分，并使用 css3 动画结合转换来切换部分。当在所有部分的滚动区域添加[-webkit-overflow-scrolling]时，触摸事件随机停止工作，所以我只是在当前显示的部分添加[-webkit-overflow-scrolling]并在该部分时删除它隐。这很好用，但我仍然不知道是什么导致了这个问题。
回答by ZeSchnoz
I have the same issue, and I can also replicate it every time. I have a page that resizes elements to fit the screen when the orientation of the iPad changes. If at any point the element no longer needs to scroll, it will stop doing so thereafter even if the element is resized back to where it needs to scroll (e.g. flipping back to landscape for me). So it's definitely a bug, but I do have a workaround:
我有同样的问题，我也可以每次都复制它。我有一个页面，当 iPad 的方向改变时，它会调整元素的大小以适应屏幕。如果在任何时候元素不再需要滚动，即使元素被调整回需要滚动的位置（例如，为我翻转回横向），它也会在此后停止滚动。所以这绝对是一个错误，但我确实有一个解决方法：
When resizing the element, I'm resetting the -webkit-overflow-scrollingto auto, then setting it back to touch. However, you have to introduce a delay between the two (50ms is working fine, didn't try any lower). So what I did was added an attribute of "scrollable" to the elements, and used the code below (using jQuery):
调整元素大小时，我将 重置-webkit-overflow-scrolling为auto，然后将其重新设置为touch。但是，您必须在两者之间引入延迟（50 毫秒工作正常，没有尝试更低）。所以我所做的是向元素添加了“可滚动”的属性，并使用了下面的代码（使用 jQuery）：
$("[scrollable]").css("-webkit-overflow-scrolling", "auto");
window.setTimeout(function () { $("[scrollable]").css("-webkit-overflow-scrolling", "touch") }, 100);
Hope this helps!
希望这可以帮助！
回答by ThinkingStiff
This is caused by having an <iframe>on the page. Many scripts create <iframes>to do their work including social tracking buttons (Facebook, Twitter, G+), analytics tracking (Google, etc.), and libraries like PhoneGap.
这是由<iframe>页面上的引起的。创建<iframes>了许多脚本来完成它们的工作，包括社交跟踪按钮（Facebook、Twitter、G+）、分析跟踪（Google 等）和 PhoneGap 等库。
It doesn't matter how the <iframe>is displayed. display: none; visibility: hidden; width: 0; height: 0does not fix it. If an <iframe>is on the page it will happen, sometimes intermittently and sometimes always.
<iframe>显示方式无关紧要。display: none; visibility: hidden; width: 0; height: 0不修复它。如果<iframe>页面上有一个，它就会发生，有时是间歇性的，有时是总是发生。
The only solution I've found so far (which is turning out to not be very workable in a production app) is to delete all <iframes>on the page, create them only when needed (for example, when I need to call a PhoneGap API), and then delete them when finished.
到目前为止，我发现的唯一解决方案（结果证明在生产应用程序中不太可行）是删除<iframes>页面上的所有内容，仅在需要时创建它们（例如，当我需要调用 PhoneGap API 时） ，然后在完成后删除它们。
回答by Julien Martin
I confirm I saw the same issue on a web app using extensively touch events and list scrolls. Before iOS5 I was using iScroll, and everything was working fine; With iOS5, I used -webkit-overflow-scrolling:touch to scroll lists to get faster scrolls.
我确认我在使用广泛触摸事件和列表滚动的网络应用程序上看到了同样的问题。在 iOS5 之前，我使用 iScroll，一切正常；在 iOS5 中，我使用 -webkit-overflow-scrolling:touch 滚动列表以获得更快的滚动速度。
The consequence is I met random occurrences of touch events no more working on various parts of the app. The issues generally occur after I scrolled a list. it affects randomly elements outside the scrolled area, typically a footer menu.
结果是我遇到了随机发生的触摸事件，不再在应用程序的各个部分工作。这些问题通常发生在我滚动列表之后。它会随机影响滚动区域之外的元素，通常是页脚菜单。
Reloading the app when in 'frozen touch' state doesn't unfreezes it : to unfreeze it, I had to close the safari tab, open a new one and reload, until I met again the issue while using the app.
在“冻结触摸”状态下重新加载应用程序不会解冻它：要解冻它，我必须关闭 safari 选项卡，打开一个新选项卡并重新加载，直到我在使用应用程序时再次遇到问题。
The issue is seen on iPad2, iPhone 4, iPhone 3GS, all on iOS 5.0
该问题出现在 iPad2、iPhone 4、iPhone 3GS 和 iOS 5.0 上
Eventually, I deactivated the overflow touch scroll and came back to iScroll, and things work well as in iOS4 .
最终，我停用了溢出触摸滚动并返回到 iScroll，并且在 iOS4 中运行良好。
回答by Alex Grande
-webkit-overflow-scrolling + CSS3 Animations + Phonegap API calls = touch stops responding.
-webkit-overflow-scrolling + CSS3 动画 + Phonegap API 调用 = 触摸停止响应。
My phonegap app will work fine until I make a call to a Phonegap API, at which point the touch will stop responding on mainly the first element that has a event attached to it in the current view. A view for my app is body > div.current with the rest of the divs display none.
我的 phonegap 应用程序将正常工作，直到我调用 Phonegap API，此时触摸将主要停止响应当前视图中附加有事件的第一个元素。我的应用程序的视图是 body > div.current，其余的 div 不显示。
I can replicate this every time.
我每次都可以复制这个。
It is clearly a bug in iOS5.
这显然是iOS5中的一个错误。
回答by Tim Medora
Here's a variation on a few of the answers already listed.
这是已经列出的一些答案的变体。
My specific issue was that reorientation caused scrolling to stop working completely when -webkit-overflow-scrolling: touchwas applied to an element.
我的具体问题是重新定向导致滚动在-webkit-overflow-scrolling: touch应用于元素时完全停止工作。
Example: Landscape orientation is shorter and needs a scrollbar. Portrait is tall enough that no scrollbar is needed. Reorient to landscape; scrollbar is present but non-functional.
示例：横向更短，需要滚动条。纵向足够高，不需要滚动条。重新定向到景观；滚动条存在但不起作用。
listen for the orientationchange event
do something which triggers a layout change on the scrolling element
ensure that the change is significant enough that the rendering engine doesn't optimize it away. For example, hiding then immediately showing does not seem to do anything. Anything that uses
setTimeout()seems to work (perhaps it is the different execution context, I don't know).
监听orientationchange 事件
做一些触发滚动元素布局更改的事情
确保更改足够显着，以至于渲染引擎不会对其进行优化。例如，隐藏然后立即显示似乎没有任何作用。任何使用的东西
setTimeout()似乎都有效（也许是不同的执行上下文，我不知道）。
Fading in and out works, or hiding and then showing with a short delay works (though it flashes). @Sari's solution for changing the scroll properties works and does not cause any visible redraw.
淡入淡出有效，或隐藏然后短暂延迟显示有效（尽管它闪烁）。@Sari 更改滚动属性的解决方案有效并且不会导致任何可见的重绘。
$(window).on("orientationchange", function () {
// use any valid jQuery selector
var elements = $("[data-touchfix=true]");
elements.css("-webkit-overflow-scrolling", "auto");
window.setTimeout(function () {
elements.css("-webkit-overflow-scrolling", "touch");
}, 100);
});
Note that I haven't tested this fix beyond my iPad 3 other than to ensure that it doesn't cause script errors in Chrome or IE 7/8/9.
请注意，除了确保它不会在 Chrome 或 IE 7/8/9 中导致脚本错误之外，我还没有在 iPad 3 之外测试此修复程序。
回答by garaboncias
To improve a little bit ThinkingStiff's excelent answer, you can avoid blinking - if overflow:hidden is set - if instead of 'auto' value just remove property:
为了稍微改进 ThinkingStiff 的优秀答案，您可以避免闪烁 - 如果设置了溢出：隐藏 - 如果只是删除属性而不是 'auto' 值：
$('.scroll').css({'overflow':'hidden','-webkit-overflow-scrolling':''});
window.setTimeout(function () { $('.scroll').css({'overflow':'auto','-webkit-overflow-scrolling':'touch'})},50);
回答by jigglyT101
In case this is of any use...Incorporating PhoneGap I was using Zepto to append ajax-loaded, scrollable content into the dom. I was then applying a css transition on it. There were no iFrames on the page.
如果这有任何用处...结合PhoneGap 我正在使用Zepto 将ajax 加载的可滚动内容附加到dom 中。然后我在它上面应用了一个 css 过渡。页面上没有 iFrame。
I was experiencing the same issue as mentioned here, where scrolling would just stop working. When I copied the generated code into a separate file and tried that on the iOS simulator - everything worked as expected.
我遇到了与此处提到的相同的问题，滚动将停止工作。当我将生成的代码复制到一个单独的文件中并在 iOS 模拟器上尝试时 - 一切都按预期进行。
I eventually got it to work by querying the height of the parent container - just before the css transition. By adding var whatever = $('#container').height();the scrolling worked.
我最终通过查询父容器的高度让它工作 - 就在 css 转换之前。通过添加var whatever = $('#container').height();滚动工作。
