-webkit-overflow-scrolling:触摸；Apple 的 iOS8 中断 [英] -webkit-overflow-scrolling: touch; breaks in Apple's iOS8

问题描述

我正在开发一个网络应用程序，该应用程序在多个地方使用 -webkit-overflow-scrolling:touch 为溢出的 div 提供惯性滚动.

I'm working on a web app that uses -webkit-overflow-scrolling:touch in several places to give the overflown divs inertia scrolling.

自从更新到 IOS8 后，-webkit-overflow-scrolling: touch 使您无法滚动任何内容，到目前为止我能够解决此问题的唯一方法是删除 -webkit-overflow-scrolling: touch 留下标准的粘性滚动.请帮忙！

Since updating to IOS8, -webkit-overflow-scrolling: touch stops you being able to scroll whatsoever, and the only way I have been able to fix this so far is by removing -webkit-overflow-scrolling: touch which leaves the standard sticky scrolling. Please help!

以下是适用于 iOS5、6 和 7 的标准类之一的示例:

Here is an example of one of the standard classes that works in iOS5, 6, and 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*/
} 

推荐答案

我有一个(相当复杂的)嵌套可滚动 div 的类似问题，它在 iOS 5、6 和 7 中滚动良好，但在 iOS 中间歇性地无法滚动8.1.

I had a similar problem with a (quite complex) nested scrollable div which scrolled fine in iOS 5, 6 and 7, but that intermittently failed to scroll in iOS 8.1.

我找到的解决方案是删除所有诱使浏览器使用 GPU 的 CSS:

The solution I found was to remove all the CSS that tricks the browser into using the GPU:

-webkit-transform: translateZ(0px);
-webkit-transform: translate3d(0,0,0);
-webkit-perspective: 1000;

通过这样做，'-webkit-overflow-scrolling: touch;'仍然可以包含并仍然正常运行.

By doing this, the '-webkit-overflow-scrolling: touch;' can still be included and still function as normal.

这确实意味着要牺牲(对我来说，可疑的)滚动性能增益，上述黑客在早期的 iO​​S 版本中提供的滚动性能，但在它和惯性滚动之间的选择中，惯性滚动被认为更重要(我们不不再支持 iOS 5).

It did mean sacrificing the (for me, dubious) gains to scrolling performance that the above hacks gave in earlier incarnations of iOS, but in the choice between that and inertia scrolling, the inertia scrolling was deemed more important (and we don't support iOS 5 anymore).

现阶段我不能说为什么会存在这种冲突；可能是这些功能的实现很糟糕，但我怀疑 CSS 中有更深层次的东西导致了它.我目前正在尝试创建一个精简的 HTML/CSS/JS 配置来演示它，但可能需要繁重的标记结构和大量的动态数据才能实现.

I cannot at this stage say why this conflict exists; it may be that it is a bad implementation of these features, but I suspect there is something a bit deeper in the CSS that is causing it. I am currently trying to create a pared down HTML/CSS/JS configuration to demonstrate it, but maybe the heavy markup structure and the large amounts of dynamic data is necessary for it to happen.

附录: 但是，我必须向我们的客户指出，即使进行了此修复，用户也开始尝试在不可滚动元素上滚动，之后她将不得不等待一秒钟在能够滚动可滚动元素之前停止.这是本机行为.

Addendum: I did, however, have to point out to our client that if even with this fix the user starts trying to scroll on a non-scrollable element she will have to wait a second after stopping before being able to scroll the scrollable element. This is native behaviour.

这篇关于-webkit-overflow-scrolling:触摸；Apple 的 iOS8 中断的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！