使用-webkit-overflow-scrolling在iOS 5中出现滚动问题

Question

我有一个带有固定高度的div的HTML页面，它应该是可滚动的（仅垂直方向）。在iOS 5中，可以通过以下方式实现：

overflow-y: auto;
-webkit-overflow-scrolling: touch;

包含一个大约有10个项目的无序列表。

滚动起来没问题，但有时候只有当我用手指斜向或者水平方向滑动时才会滚动，而不是应该垂直方向滚动。

我想知道是否有人遇到过这个问题。我不想认为这是iOS5中的一个bug，但我也想不出自己哪里做错了，因为大部分时间都可以正常工作。

- SzilardD

---

你找到解决方法或变通之道了吗？我也遇到了同样的问题，一直想不出解决方法... - JohannesD

我发起了一个悬赏，以便将其授予paul。 - Dan Abramov

Google Groups中的相关讨论 - Dan Abramov

Answer 1

我曾经遇到过同样的问题。问题最终是由于我的网站使用了两个零尺寸的 iframe 来追踪历史更改和加载脚本所致。移除这些内容可以修复该问题。我已向苹果公司报告了此问题，并正在等待他们的回复。

请检查您的页面上是否存在任何 iframe，它们可能是问题的原因。

- paul stockley

---

你有听到苹果的消息吗？或者你找到了除了删除iframes之外的其他解决方法吗？我在尝试让-webkit-overflow-scrolling与[标签：vaadin]一起工作时遇到了这个问题。 - JohannesD

在这个问题上遇到了瓶颈：http://stackoverflow.com/questions/10718296/ios5-overflow-scrolling-horizontally-is-controlled-by-vertical-touch 在纵向和横向之间切换似乎可以解决问题。不过我不知道原因（我的页面上没有iframes）。 - middric

翻转、3D变换和iframe删除对我没有任何作用。我要开始悬赏了。 - Hessius

在我花了几个晚上处理这个 bug 后，移除不可见的 iframe 解决了问题。您，先生，真是太棒了！ - Dan Abramov

Answer 2

我找到了一个简单的解决方案，但需要使用Javascript...

我在通过Ajax加载可滚动节点并使用js追加它们时遇到了这个问题。

我发现使用js重置-webkit-overflow-scrolling属性可以解决问题。

Javascript代码：

var myDiv = $('.myDiv');
myDiv.css('-webkit-overflow-scrolling','auto');
function fn(){
    myDiv.css('-webkit-overflow-scrolling','touch');
}
setTimeout(fn,500);

很遗憾我们必须调用setTimeout方法，但这是我能想到的唯一方式...

编辑：注意display:none

iPad上Webkit溢出滚动触摸CSS错误

- Armel Larcier

---

谢谢！虽然这种方法有些取巧，但在我看来，这本来就是iOS的一个bug。 - Adam Grant

Answer 3

您需要将以下css设置放入您的css文件中，即加载使用content_css配置变量的文件：

body {
    -webkit-transform: translate3d(0, 0, 0);
}

另一种选项是在 TinyMCE 初始化时直接从代码中设置 CSS：

$(tinymce.activeEditor.getBody()).css('-webkit-transform', translate3d(0, 0, 0));

- Thariama

Answer 4

我在iOS 5.1.1中遇到了同样的问题，原因是一个带有position: fixed伪元素::after，这个伪元素位于一个包含可滚动列表的元素上，导致出现“错误的滚动轴”行为。 详细信息请查看此处。

- lazd