IOS -webkit-overflow-scrolling在错误的轴上滚动，或根本不滚动

我正在用html5构buildIOS的移动应用程序。 我正在使用“-webkit-overflow-scrolling：touch”来获得原生的惯性滚动，但是它很麻烦。 我已经解决了内容不滚动，直到滚动停止的问题，但一个持续性的错误是这样的：

当我尝试上下滚动时，没有任何反应，但当我尝试水平滚动时，内容会垂直滚动（离轴90度）。 如果我浏览我的应用程序并回到页面，它有时会被修复。 另外，尽pipe内容丰富，但有时它根本不会滚动。

从我所search的内容来看，似乎苹果已经意识到了这个漏洞，并且不打算立即修复它。 有没有人find一个解决scheme来让-webkit溢出滚动正常工作？

Answer 1

几个月来我也一直在苦苦挣扎。 我发现的最好的特征是：

https://bugs.webkit.org/show_bug.cgi?id=87391

其中说，当页面有一个iFrame和内容是从Javascript设置时发生。 我在graphics编解码器1.6版中的当前解决方法是使用iScroll4来显式滚动页面，而不是使用触摸滚动。 因为Javascript是单线程的，如果你还在执行animation或后台加载内容，这可能会很慢。

Answer 2

我遇到了同样的问题：一个节点使用-webkit-overflow-scrolling: scroll会间歇性地向上/向下滚动左/右滚动手势。

这是我发现可能的原因：

• iframe出现在任何地方，可见或其他（ 源 ）
• visibility: hidden应用于可滚动节点的任何父项（ 源 ）

但是，这些情况都没有出现在我的networking应用程序。 我在一个纯CSS模式对话框中有一个可滚动的<ul> ，我使用了一个巧妙的技巧来添加一个透明的底层 – 一个::after position: fixed伪元素。

当我删除position: fixed从伪元素position: fixed ，问题就消失了！ 当然，这使得我的聪明窍门毫无用处，但是知道这个错误可能是由这种情况引发的，这很有趣。

设备： 2012年iPad 3（视网膜）iOS 5.1.1

出错代码：

 /* Underlay */ .dialog::after { z-index: -1; position: fixed; /* <--- This was the problem! */ top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0,0,0,0.4); content: ""; } 

tl; dr：如果包含元素有一个固定位置的伪元素，删除它可以解决你的滚动问题。

Answer 3

我知道这个问题是古老的，但我不得不使我的网站在iOS 5上工作。不幸的是，我不能删除或取代iframe。 我已经注意到iframe的存在只有在元素被呈现在要滚动的元素之前才引起问题。 稍后将iframe添加到文档中（使用-webkit-overflow-scrolling：touch之后的元素）解决了问题:)