“-webkit-overflow-scrolling：touch”导致移动设备出现垂直滚动问题

Question

我正在制作一个快速响应的移动网站。 在我的手机上测试时，我注意到我无法垂直滚动可以水平滚动的东西。

以下是我的意思的一个示例（抱歉，您无法在手机上看到水平滚动，但只要相信它有效）。

移动Webkit浏览器无法在此示例中滚过表格： http://jsfiddle.net/tArEy/

然后我注释掉以下行以使垂直滚动工作。但是，这使得水平滚动有点不稳定。

-webkit-overflow-scrolling: touch;

移动Webkit浏览器可以在此示例中滚过表格，但这有点不明智。 http://jsfiddle.net/tArEy/1/

有没有人知道如何使用CSS修复此问题？

必须在浏览器上测试演示。 （我在Android上运行Chrome浏览器。我认为iPhone有同样的问题。）

修改

事实证明，在CSS中没有以下行的移动webkit浏览器中水平滚动是非常错误的：

-webkit-overflow-scrolling: touch;

然而，这条线使得无法垂直滚动，所以我有点停滞不前。其他非webkit浏览器水平滚动就好了。

编辑2：

我把手放在了iphone上。溢出滚动是硬件加速并且完美无缺。这似乎只是一个 Chrome for Android 问题。

Answer 1

这只是针对Android的Chrome中的错误。它是在最近的升级中修复的。

Answer 2

这可能有助于解决问题：http://filamentgroup.github.com/Overthrow/ 只有较新的手机才支持溢出滚动功能。当我测试我已经看到新手机是否有轻微的滚动问题支持Android 2.x和ios4会让你哭。

如果你是横向滚动，你可能想重新考虑你的设计。