iOS 5 为网页设计师发布了一个新属性 -webkit-overflow-scrolling:touch，它使用 iOS 设备硬件加速器为可滚动的 div 提供原生滚动。
在我们的开发网站上实施时，它确实有效，但效果不佳。我相信可能存在 CSS 问题，因此我在这里问。
以下fiddle 将向您展示它的完美运行
如果您在开发中访问我们的网站，您会在“设施”选项卡下找到相同的面板，但在 iOS 上，虽然滚动非常完美，但溢出的部分并没有显示出图片一分为二。
http://www.golfbrowser.com/courses/mill-ride/
我不知道如何解决这个问题 http://www.golfbrowser.com/photo.PNG
【问题讨论】：
他们在这里放纵了多么糟糕。尝试了各种解决方法，直到我终于找到了在-webkit-overflow-scrolling:touch div 中正确呈现元素所需的唯一属性：position: static
相对和绝对定位的元素总是在边界上被截断，并且在边界之外完全缺失（除了空白区域）。如果您动态更改位置属性，从静态更改为绝对，则只有可滚动 div 视口的可见部分保持呈现，无论偏移量发生在哪里。
【讨论】：
我深入研究了这个错误，我还创建了一个 jsfiddle 并在错误报告中提交给 Apple。请参阅：iOS5 Images disappear when scrolling with webkit-overflow-scrolling: touch Apple 回复我后，我会立即报告该主题，以便您及时了解这个非常烦人的错误
【讨论】：
我还遇到了将 -webkit-overlfow-scrolling 设置为 touch 的溢出滚动导致定位元素重绘问题的问题。就我而言，我有一个列表，其中各个项目具有相对定位，以便我可以在其子元素上使用定位。使用 iOS 5 上的上述 CSS，当用户将隐藏的内容滚动到视图中时，在重新绘制屏幕以查看元素之前会有短暂的延迟。这真的很烦人。幸运的是，我发现如果我也给父节点位置相对，这个问题就解决了。
【讨论】：
我也遇到过这个错误。我通过将以下 css 应用于父元素来修复它：
-webkit-transform: translate3d(0, 0, 0);
但是，我注意到，当触摸的输入元素滚动到视图的中心（通过 Safari/iOS）时，这会减慢渲染速度，并且可能会选择其他输入元素。
【讨论】：
-webkit-overflow-scrolling: touch 容器内的 position: relative 元素上。
正如@relluf 所指出的，在相关元素上应用 3D 过渡可以修复该错误。但是，我对其进行了进一步调查，似乎应用-webkit-transform: translateZ(0px) 也有效（这是谷歌在 gmaps 地图容器上所做的）并且它不需要位于相对定位的元素上，只是可滚动元素的直接后代.
因此，如果您不想手动保留需要修复的所有位置的列表，您可以这样做：
element {
-webkit-overflow-scrolling: touch;
}
element > * {
-webkit-transform: translateZ(0px);
}
【讨论】：
-webkit-transform。
element > * 有问题。虽然它修复了剪辑问题，但滚动元素会在滚动时闪烁。我通过对所有元素应用硬件加速来修复闪烁：element *（无直接子选择器）。
这个bug仍然存在于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;
}
【讨论】：
我尝试了一些不同的解决方案，但在我的情况下似乎无法完美运行。
我终于找到了一种适用于 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>
【讨论】：