CSS3属性webkit-overflow-scrolling：touch错误

iOS 5发布网页设计师一个新属性-webkit-overflow-scrolling:touch，它使用iOS设备硬件加速器为可滚动的div提供本地滚动。CSS3属性webkit-overflow-scrolling：touch错误

当我们的网站在开发中实施时，它确实有效，但效果不好。我相信可能存在一个CSS问题，因此我在这里问。

下fiddle会告诉你它的工作完美

如果你弹出到我们的网站在发展，你会发现设备选项卡下，但在iOS相同的面板虽然滚动是完美的溢出部分不以显示图片文字地切成两半。

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

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

来源

2011-10-18 Robin Knight

我遇到对iOS6的一个类似的问题（问题的网页能正常工作的iOS5中）。通过应用-webkit-transform修复：translate3d（0，0，0）;到已被切断的img标签，现在工作正常。 – codebox

正如@relluf所指出的，在相关元素上应用3D转换可修复该错误。然而，我进一步调查了一下，看起来应用-webkit-transform: translateZ(0px)也是如此（这是谷歌在gmaps map容器上的工作），并且它不需要位于相对定位的元素上，只是可滚动元素的直接后代。

所以，如果你不想手动保持在需要修复的所有地方的列表，你才可能做到：

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

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

来源

2012-04-12 11:32:08 spheroid

这对我有用！感谢很多球体。 – Mark

也适合我。 +1。 – rkulla

也适合我。秘密就是对滚动区域内的项目执行'-webkit-transform'。 –

他们让什么不好的毛病松动这里。试图解决方法的所有方式，直到我终于发现了元素在-webkit-overflow-scrolling:touch DIV能正确显示所需要的唯一属性：position: static

相对和绝对定位的元素总是切断边界上，并完全缺失（除了空空间）在它之外。如果动态更改位置属性（从静态到绝对），则只有可滚动div视口的可见部分保持呈现状态，无论偏移何处。

来源

2011-10-25 23:04:37 user1012566

我试试吧.... –

这对我有效，我删除了位置：相对于某些输入元素（将它们保留为默认位置：static），并且它们在整个滚动过程中都正确渲染。 – Paul

不错的工作，这解决了问题！ –

我深入研究了这个bug，我也创建了一个jsfiddle，并将它提交给Apple的一个bug报告。请参阅：iOS5 Images disappear when scrolling with webkit-overflow-scrolling: touch 只要苹果公司回复我，我就有关该主题的报告，以便可以随时掌握最新对此非常恼人的错误

来源

2011-11-26 15:37:24 lucaferrario

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

来源

2011-12-05 20:57:21 Robert

我也碰到过这个bug。我通过应用以下css来的父元素固定它：

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

然而，我注意到，减慢渲染，可能会选择在触摸输入元素滚动到视图的中心不是想其他投入要素（通过Safari/iOS）。

来源

2012-01-04 20:43:04 relluf

这适用于我，将其设置在'-webkit-overflow-scrolling：touch'容器内的'position：relative'元素上。 –

请忽略该部分“，并且可能会在触摸的输入元素滚动到视图的中心时选择其他所需的输入元素”。我误解了。 – relluf

的错误仍然生活在iOS 6中。如果您的问题与position: relative有关，则可以通过JS临时设置z-index: 1来解决问题。在我的情况下，-webkit-transform: translate(...)没有与position: relative一起使用。

来源

2013-03-15 21:10:47 Bernd

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

来源

2017-05-13 16:21:34 joeyhoer

对我来说，这似乎很奇怪你永远不会改变变形属性，还是我们？ – gmustudent

我尝试了一些不同的解决方案，在我的情况下似乎不起作用。

最后，我已经找到一种方法工作正常使用jQuery：

当你触摸了每一次应用-webkit-溢出滚动特性。

*起初我还-webkit-溢出滚动应用于：汽车时的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>

来源

2017-11-22 09:19:35

CSS3属性webkit-overflow-scrolling：touch错误

回答

相关问题