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过渡可以修复bug。但是，我进一步调查了一下，似乎应用-webkit-transform: translateZ(0px)也起作用（这是谷歌在gmaps地图容器上所做的）并且它不需要位于相对定位的元素上，只是它的直接后代。可滚动元素。

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

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

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

Answer 2

他们放松了什么？尝试了所有方法，直到我最终找到了在-webkit-overflow-scrolling:touch div中正确呈现元素所需的唯一属性：position: static

相对和绝对定位的元素总是在边界上被切除，并且在它之外完全缺失（空白空间除外）。如果动态更改position属性，从static到absolute，只有可滚动div视口的可见部分保持渲染，无论偏移恰好在哪里。

Answer 3

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

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

但是，我注意到，当触摸的输入元素滚动到视图的中心时（通过Safari / iOS），这会减慢渲染并可能选择其他输入元素。

Answer 4

我深深调查了这个错误，我还创建了一个jsfiddle并在错误报告中将其提交给Apple。请参阅：iOS5 Images disappear when scrolling with webkit-overflow-scrolling: touch 一旦Apple回复我，我会立即报告该主题，以便您及时了解这个非常烦人的错误

Answer 5

在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 6

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

Answer 7

该错误仍然存在于iOS 6中。如果您的问题与position: relative有关，则可以通过JS临时设置z-index: 1来解决问题。 <{1}}在我的案例中与-webkit-transform: translate(...)无效。

Answer 8

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

最后，我发现使用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>

CSS3属性webkit-overflow-scrolling：touch ERROR

8 个答案: