CSS3 property webkit-overflow-scrolling:touch ERROR

Question

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

当在我们的网站开发中实现时，它确实工作，但不是很好。我相信可能有CSS问题，所以我在这里问。

下面的小提琴将向您展示它的完美工作

如果你打开我们正在开发的网站，你会发现在设施选项卡下有相同的面板，但在iOS上，尽管滚动很完美，但溢出的部分没有显示，图片被切成两半。

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

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

Answer 1

正如@relluf所指出的，在相对元素上应用3D过渡可以修复这个bug。然而，我进一步调查了一下，似乎应用-webkit-transform: translateZ(0px)也有效(这就是谷歌在gmaps地图容器上所做的)，它不需要在相对定位的元素上，只是可滚动元素的直接后代。

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

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

Answer 2

他们在这里放了个什么鬼。尝试了所有的解决方法，直到我最终找到了元素在-webkit-overflow-scrolling:touchdiv中正确渲染所需的唯一属性:position: static

相对和绝对位置的元素总是在边界上被切断，并且在它之外完全缺失(除了空白空间)。如果动态地更改position属性，从静态更改为绝对，则只有可滚动div视口的可见部分保持呈现，无论偏移量在哪里。

Answer 3

我也遇到过这个bug。我通过将以下css应用于父元素来修复它:

-webkit-transform: translate3d(0, 0, 0);

然而，我注意到，当触摸输入元素滚动到视图中心(Safari/iOS)时，这可能会减慢渲染速度，并可能选择其他输入元素。

Answer 4

在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;
}

Answer 5

我深入调查了这个bug，我还创建了一个jsfiddle，并在bug报告中提交给了苹果。请参阅:iOS5使用webkit-overflow-scrolling: touch滚动时图像消失一旦苹果回复我，我就会报告这个话题，这样你就可以随时了解这个非常烦人的bug

Answer 6

我也遇到过这样的问题:设置-webkit- overlay -scrolling为touch的overflow scroll会导致定位元素出现重绘问题。在我的例子中，我有一个列表，其中各个项目具有相对定位，因此我可以对它们的子元素使用定位。在iOS 5上使用上述CSS，当用户滚动隐藏内容进入视图时，在重新绘制屏幕以查看元素之前会有短暂的延迟。这真的很烦人。幸运的是，我发现如果我也给出父节点相对位置，这个问题就解决了。

Answer 7

这个bug在iOS 6中仍然存在。如果你的问题与position: relative有关，你可以通过JS暂时设置z-index: 1来解决这个问题。在我的情况下，-webkit-transform: translate(...)不与position: relative一起工作

Answer 8

我尝试了一些不同的解决方案，但在我的情况下似乎并不完美。

最后我找到了一个方法可以很好地使用jQuery:

每次润色时应用-webkit-overflow-scrolling属性

*起初我还应用-webkit-overflow-scrolling:auto当TouchDown，禁用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>