CSS3 属性 webkit-overflow-scrolling :touch ERROR

Question

iOS 5 向网页设计师发布了一个新属性 -webkit-overflow-scrolling:touch，它使用 iOS 设备硬件加速器为可滚动的 div 提供原生滚动。

当在我们的开发网站上实现时，它确实有效但效果不佳。我相信可能存在 CSS 问题，因此我在这里提问。

以下fiddle将向您展示它完美地工作

如果您访问我们正在开发的网站，您会在设施选项卡下找到相同的面板，但在 iOS 上，尽管滚动是完美的，但溢出的部分没有显示，图片被一分为二。

http://www.golfbrowser.com/courses/mill-ride/

我不知道如何解决这个问题 http://www.golfbrowser.com/photo.PNG

Answer 1

正如@relluf 指出的那样，在相关元素上应用 3D 过渡可以修复该错误。但是，我进一步调查了一下，似乎应用 -webkit-transform: translateZ(0px) 也有效(这是谷歌在 gmaps map 容器上所做的)并且它不需要打开相对定位的元素，只是可滚动元素的直接后代。

因此，如果您不想手动保留需要修复的所有位置的列表，您可以这样做:

element {
    -webkit-overflow-scrolling: touch;
}

element > * {
    -webkit-transform: translateZ(0px);
}