IOS-webkit溢出滚动轴在错误的轴上，或者根本没有

我正在用html5为IOS构建一个移动应用程序。我使用“-webkit overflow scrolling:touch”来获得本机惯性滚动，但它有很多缺陷。我已经解决了在滚动停止之前不呈现内容的问题，但一个持久的错误是：

当我尝试上下滚动时，什么也不会发生，但当我尝试水平滚动时，内容会垂直滚动（偏离轴90度）。如果我浏览我的应用程序并返回页面，它有时会被修复。此外，有时它根本不会滚动，尽管它充满了内容

---

从我在谷歌上搜索到的信息来看，大家的共识似乎是苹果已经意识到了这个漏洞，并且无意在短期内修复它。是否有人找到了一个解决方案来让-webkit溢出滚动正常工作？

我也与这个错误斗争了几个月。我发现最好的特征是：

---

也就是说，当页面有一个iFrame并且内容是从Javascript设置的时候，就会发生这种情况。我目前的解决方法是使用iScroll4显式滚动页面，而不是使用触摸滚动。由于Javascript是单线程的，如果您同时执行动画或后台加载内容，这可能会很慢。

我遇到了相同的问题：一个节点使用

-webkit overflow scrolling:scroll

，它只会使用左/右滚动手势间歇性地向上/向下滚动

以下是我发现的可能原因：

• iframe显示在页面的任何位置，可见或其他（）

• 可见性：隐藏

  应用于可滚动节点（）的任何父节点

但是，我的web应用程序中没有出现这些情况。在我编写的纯CSS模式对话框中有一个可滚动的

，该对话框使用了一个巧妙的技巧添加了一个透明的参考底图--

：：after

伪元素和

位置：fixed

当我从伪元素中删除

位置：fixed

时，问题就消失了！当然，这使得我的聪明技巧毫无用处，但有趣的是，这种情况可能会触发这个bug

设备：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: "";
}

/*参考底图*/
.对话：：之后{
z指数：-1；
位置：修复；/*我知道这个问题有点老了，但我必须让我的网站在iOS 5上运行。不幸的是，我无法删除或替换iframe。我注意到，只有在元素平滑滚动之前呈现iframe时，iframe的存在才会导致问题。稍后将iframe附加到文档中（在使用-webkit溢出滚动的元素之后：touch）修复了问题：）
我最后还使用了iScroll4。这并不理想，但它确实比…iOS更好地模拟了iOS滚动。提示：我还通过将transform3d样式设置为0,0,0来渲染滚动部分硬件的内容。这样，它们就可以预渲染，如果有很多内容，你就不会紧张地滚动。我正在使用在iOS上的jQuery对话框中滚动也存在同样的问题。插件不是一个很好的解决方案，而且仍然有点奇怪。同样存在同样的问题。尚未找到解决方案。