CSS3属性webkit溢出滚动：触摸错误
iOS 5向网页devise师发布了一个新的属性-webkit-overflow-scrolling:touch ，它使用iOS设备硬件加速器为可滚动的div提供本地滚动。
当我们的网站在开发中实施时，它确实工作，但不好。 我相信可能有一个CSS问题，所以我在这里问。
下面的小提琴会告诉你它完美的工作
如果您在开发中popup到我们的网站，您将在设备选项卡下find相同的面板，但是在iOS上，尽pipe滚动是完美的，但溢出的部分不会显示，并且图像会被明显地切成两半。
http://www.golfbrowser.com/courses/mill-ride/
我不知道如何解决这个http://www.golfbrowser.com/photo.PNG
正如@relluf指出的那样，在相关元素上应用3D转换修复了这个bug。 不过，我进一步调查了一下，似乎应用-webkit-transform: translateZ(0px)可以工作（这是Google在gmaps map容器上的工作），它不需要位于相对定位的元素上，可滚动元素的直接后代。
因此，如果您不想手动保存需要修复的所有位置的列表，则可以执行以下操作：
element { -webkit-overflow-scrolling: touch; } element > * { -webkit-transform: translateZ(0px); }
他们在这里放任什么杂货。 尝试了所有的解决方法，直到我终于find了元素在-webkit-overflow-scrolling:touch正确呈现所需的唯一属性-webkit-overflow-scrolling:touch div： position: static
相对和绝对定位元素总是在边界上被截断，并且在其外部完全缺失（除了空的空间）。 如果dynamic更改位置属性（从静态到绝对），则只有可滚动div视口的可见部分才会呈现，无论偏移何处。
我也遇到了这个bug。 我通过将下面的CSS应用于父元素来解决它：
-webkit-transform: translate3d(0, 0, 0);
不过，我注意到，这减慢了渲染速度，并且可能会在触摸的input元素滚动到视图的中心（由Safari / iOS）中select其他的input元素。
我深入研究了这个错误，我也创build了一个jsfiddle并将其提交给苹果公司的一个bug报告。 请参阅： iOS5图像在使用webkit溢出滚动滚动时消失：touch只要苹果回复我，我就会在该主题上报告，以便您可以及时了解这个非常烦人的错误
我也遇到这样的问题，溢出滚动与-webkit-overlfow-scrolling设置为触摸导致定位元素的重绘问题。 在我的情况下，我有一个列表，其中各项目有相对定位，以便我可以使用定位在他们的子元素。 通过上面的iOS 5的CSS，当用户将隐藏的内容滚动到视图中时，在重新画面查看元素之前有一个暂时的延迟。 这真的很烦人。 幸运的是，我发现，如果我给父节点相对位置，这个问题已经解决了。
该错误依然存在于iOS 6.如果你的问题与position: relative ，你可以通过JS临时设置z-index: 1来解决问题。 -webkit-transform: translate(...)没有与position: relative在我的情况下工作。
在iOS中，如果元素中具有-webkit-overflow-scrolling: touch的元素相对于滚动容器外的元素进行了绝对（或fixed ）定位，则该元素只会呈现一次，并且呈现不会更新为元素被滚动。 示例HTML：
<div class="relative-to-me"> <div class="scrollable"> <div class="absolutely-positioned"> </div> </div> </div>
如果您通过更改CSS属性（例如在检查器中）来强制重新渲染，则可以看到元素的位置被重新渲染到正确的位置。 我怀疑这是一些性能优化滚动性能的结果。
解决这个问题的方法是在绝对（或固定）定位元素上设置will-change: transform 。
.absolutely-positioned { will-change: transform; }
