-webkit-overflow-scrolling：touch; Apple的iOS8中断了 [英] -webkit-overflow-scrolling: touch; breaks in Apple's iOS8

问题描述

我正在开发一个使用 -webkit-overflow-scrolling的web应用程序：触摸在几个地方给出溢出的divs惯性滚动。

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.

这确实意味着牺牲了（对我来说，可疑的）收益来提升上述黑客在早期版本的iOS中所提供的滚动性能，但是在选择中在惯性滚动和惯性滚动之间，惯性滚动被认为更重要（我们不再支持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：touch; Apple的iOS8中断了的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！