iOS 5发布了一个新的属性-webkit-overflow-scrolling：touch，利用iOS设备的硬件加速器为可滚动的div提供本地滚动。
在我们正在开发的网站上实现时，它确实可以工作，但效果不好。我认为可能存在CSS问题，因此在这里询问。
以下代码片段将向您展示其正常工作
如果您在iOS上访问我们正在开发中的网站，您将在"设施"选项卡下找到相同的面板，尽管滚动非常完美，但溢出部分没有显示图片，并且图片被切成两半。
http://www.golfbrowser.com/courses/mill-ride/
我不知道如何修复这个问题。 http://www.golfbrowser.com/photo.PNG
正如@relluf指出的那样，在相对定位的元素上应用3D转换可以修复此错误。然而，我进一步调查了一下，似乎应用-webkit-transform: translateZ(0px)也可以解决问题（这是Google在gmaps地图容器上使用的方法），并且不需要放在相对定位的元素上，只需放在可滚动元素的直接后代元素上即可。
因此，如果您不想手动维护所有需要进行修复的位置列表，您只需执行以下操作：
element {
-webkit-overflow-scrolling: touch;
}
element > * {
-webkit-transform: translateZ(0px);
}
element > *有点问题。虽然它解决了剪切问题，但滚动元素在滚动时会闪烁。我通过将硬件加速应用于所有元素来修复了闪烁问题：element *（无直接子选择器）。 - Pwner这里出现了一个麻烦的 bug。我试了各种方法来解决，最终发现在 -webkit-overflow-scrolling:touch 的 div 中，唯一需要正确呈现元素的属性是： position: static。
相对定位和绝对定位的元素总是被修剪在边界上，在边界外则完全缺失（除了空白区域）。如果您动态地将 position 属性从 static 更改为 absolute，则仅在滚动的 div 视口中可见的部分保持呈现，不管偏移量在哪里。
我也遇到了这个bug。我通过将以下css应用于父元素来解决它：
-webkit-transform: translate3d(0, 0, 0);
然而，我注意到这会减慢渲染速度，并且在 Safari/iOS 中，当触摸的输入元素滚动到视图中心时，可能会选择其他输入元素。
-webkit-overflow-scrolling: touch 容器内的 position: relative 元素上进行设置。 - samy-delux在iOS中，当一个带有-webkit-overflow-scrolling: touch属性的元素内部包含一个绝对定位（或固定定位）于滚动容器之外的元素时，该元素将仅呈现一次，而随着元素的滚动，其渲染不会更新。示例HTML：
<div class="relative-to-me">
<div class="scrollable">
<div class="absolutely-positioned">
</div>
</div>
</div>
will-change: transform。.absolutely-positioned {
will-change: transform;
}
我深入调查了这个bug，还创建了一个jsfiddle并将其提交给苹果的错误报告。请参见：iOS5 Images disappear when scrolling with webkit-overflow-scrolling: touch 一旦苹果回复我，我会在那个话题上报告它，以便您可以及时了解这个非常烦人的问题。
-webkit-transform: translate(...)在我的情况下无法与position: relative一起使用。我也遇到了一个问题，即使用-webkit-overlfow-scrolling设置为touch的overflow scroll会导致定位元素的重绘问题。在我的情况下，我有一个列表，其中各个项目具有相对定位，以便我可以在它们的子元素上使用定位。在iOS 5上使用上述CSS时，当用户将隐藏内容滚动到视图中时，屏幕重新绘制元素之前会有短暂的延迟。这真的很烦人。幸运的是，我发现如果我也给父节点设置相对位置，这个问题就解决了。
我尝试了一些不同的解决方案，但在我的情况下似乎都不完美。
最终，我找到了一个使用jQuery很好的方法：
每次触摸结束时应用-webkit-overflow-scrolling属性。
*起初，我还在TouchDown时应用了-webkit-overflow-scrolling:auto来禁用iOS渲染。但这会导致页面闪烁。所以我放弃了它，然后惊奇地发现它可以正常工作！
请查看下面的代码行，希望能有所帮助：
<!-- JQuery Functions-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
// Apply -webkit-overflow-scrolling in Every TouchEnd
$(document).on('click touchend', function(event) {
$("#TestDIV").css({"-webkit-overflow-scrolling":"touch"});
});
</script>
<!-- html Elements & Style -->
<div id="TestDIV">
<div class="Element"></div>
<div class="Element"></div>
<div class="Element"></div>
<div class="Element"></div>
<div class="Element"></div>
</div>
<style>
#TestDIV{
white-space: nowrap;
overflow-x: scroll;
-webkit-overflow-scrolling:touch;
}
#TestDIV .Element{
width:300px;
height:300px;
margin: 2px;
background-color: gray;
display: inline-block;
}
#TestDIV .Element:nth-child(odd){
background-color: whitesmoke;
}
</style>