CSS CSS3 属性 webkit-overflow-scrolling:touch 错误
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7808110/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS3 property webkit-overflow-scrolling:touch ERROR
提问by RIK
iOS 5 released web designers a new property -webkit-overflow-scrolling:touchthat uses the iOS devices hardware accelerator to provide native scrolling for a scrollable div.
iOS 5 向网页设计师发布了一个新属性-webkit-overflow-scrolling:touch，该属性使用 iOS 设备硬件加速器为可滚动 div 提供本机滚动。
When implemented on our site in development it does work but not well. I believe there may be a CSS issue hence I ask here.
在我们的网站开发中实施时，它确实有效，但效果不佳。我相信可能存在 CSS 问题，因此我在这里问。
The following fiddlewill show you it working perfectly
以下小提琴将向您展示它的完美运行
If you pop over to our site in development you will find the same panel under facilities tab but on iOS although the scrolling is perfect the overflowed section is not shown with pictures literarily chopped in two.
如果您跳转到我们正在开发的网站，您会在设施选项卡下找到相同的面板，但在 iOS 上，尽管滚动是完美的，但溢出的部分并未显示，图片实际上被切成两半。
http://www.golfbrowser.com/courses/mill-ride/
http://www.golfbrowser.com/courses/mill-ride/
I have no idea how to fix this http://www.golfbrowser.com/photo.PNG
我不知道如何解决这个问题 http://www.golfbrowser.com/photo.PNG
回答by spheroid
As @relluf pointed out, applying 3D transitions on the relative element fixes the bug. However, I investigated it a bit further and it seems that applying -webkit-transform: translateZ(0px)works too (this is what Google does on gmaps map container) and it does not need to be on the relatively positioned element, just the direct descendant of the scrollable element.
正如@relluf 指出的那样，在相关元素上应用 3D 转换修复了错误。但是，我进一步调查了它，似乎应用-webkit-transform: translateZ(0px)也有效（这就是 Google 在 gmaps 地图容器上所做的）并且它不需要在相对定位的元素上，只需在可滚动元素的直接后代上。
So if you don't want to manually keep a list of all the places where the fix is needed, you just might do:
因此，如果您不想手动保留需要修复的所有位置的列表，您可以这样做：
element {
-webkit-overflow-scrolling: touch;
}
element > * {
-webkit-transform: translateZ(0px);
}
回答by user1012566
What a bugger they let loose here. Tried all manner of workarounds until I finally found the only property needed by for elements to be properly rendered in a -webkit-overflow-scrolling:touchdiv: position: static
他们在这里放纵真是个混蛋。尝试了各种解决方法，直到我终于找到了在-webkit-overflow-scrolling:touchdiv 中正确呈现元素所需的唯一属性： position: static
Relative and absolute positioned elements are always cut off on the boundary, and completely missing (except for empty space) outside of it. If you change the position property dynamically, from static to absolute, only the visible portion of the scrollable div viewport stays rendered, wherever the offset happens to be.
相对和绝对定位的元素总是在边界上被切断，并且在边界之外完全丢失（除了空白空间）。如果动态更改位置属性，从静态更改为绝对，则只有可滚动 div 视口的可见部分保持渲染，无论偏移发生在何处。
回答by relluf
I have run into this bug as well. I fixed it by applying the following css to parent elements:
我也遇到了这个错误。我通过将以下 css 应用于父元素来修复它：
-webkit-transform: translate3d(0, 0, 0);
However, I have noticed that that slows down rendering and might select other input elements than wanted when a touched input element is scrolled into the center of the view (by Safari/iOS).
但是，我注意到这会减慢渲染速度，并且当触摸的输入元素滚动到视图的中心（通过 Safari/iOS）时，可能会选择其他不需要的输入元素。
回答by lucaferrario
I deeply investigated this bug, I also created a jsfiddle and submitted it to Apple in a bug report. Please see: iOS5 Images disappear when scrolling with webkit-overflow-scrolling: touchAs soon as Apple replies to me, I'll report it on that topic so you can stay up-to-date about this very annoying bug
我深入研究了这个错误，我还创建了一个 jsfiddle 并在错误报告中将其提交给 Apple。请参阅：使用 webkit-overflow-scrolling 滚动时 iOS5 图像消失：触摸Apple 回复我后，我将立即报告该主题，以便您了解这个非常烦人的错误
回答by joeyhoer
In iOS, when an element inside an element with -webkit-overflow-scrolling: touchset is positioned absolutely (or fixed) relative to an element outside of the scrolling container, the element is rendered only once and the rendering is not updated as the element is scrolled. Sample HTML:
在 iOS 中，当带有-webkit-overflow-scrolling: touchset的元素内的元素fixed相对于滚动容器外的元素绝对（或）定位时，该元素仅渲染一次，并且不会在元素滚动时更新渲染。示例 HTML：
<div class="relative-to-me">
<div class="scrollable">
<div class="absolutely-positioned">
</div>
</div>
</div>
If you force a re-render by changing a CSS property (in the inspector for example), you can see that the element's positioning is re-rendered into the correct location. I suspect this is a result of some performance features to optimize scrolling performance.
如果您通过更改 CSS 属性（例如在检查器中）强制重新渲染，您可以看到元素的定位被重新渲染到正确的位置。我怀疑这是优化滚动性能的一些性能特性的结果。
The solution to this problem is to set will-change: transformon the absolutely (or fixed) positioned element.
这个问题的解决方案是will-change: transform在绝对（或固定）定位的元素上设置。
.absolutely-positioned {
will-change: transform;
}
回答by Bernd
The bug still lives in iOS 6. If your issue is related to position: relative, you might solve the issue be setting z-index: 1temporarily via JS. -webkit-transform: translate(...)did not work with position: relativein my case.
该错误仍然存在于 iOS 6 中。如果您的问题与 相关position: relative，您可以z-index: 1通过 JS 临时设置来解决问题。在我的情况下-webkit-transform: translate(...)不起作用position: relative。
回答by Robert
I also experienced the problem where overflow scroll with -webkit-overlfow-scrolling set to touch resulted in redraw problems with positioned elements. In my case I had a list where the individual items had relative positioning so that I could use positioning on their child elements. With the above CSS on iOS 5, when the user scrolled hidden content into view, there was a momentary delay before it redrew the screen to review the elements. It was really annoying. Fortunately I discover that if I gave the parent node position relative as well, this was resolved.
我还遇到了溢出滚动的问题，其中 -webkit-overlfow-scrolling 设置为 touch 导致定位元素重绘问题。就我而言，我有一个列表，其中各个项目具有相对定位，以便我可以在它们的子元素上使用定位。使用 iOS 5 上的上述 CSS，当用户将隐藏的内容滚动到视图中时，在重新绘制屏幕以查看元素之前会有短暂的延迟。这真的很烦人。幸运的是，我发现如果我也给出了父节点的相对位置，这个问题就解决了。
回答by Corxit Sun
I tried some different solutions, seemed not work perfectly in my case.
我尝试了一些不同的解决方案，在我的情况下似乎并不完美。
Finally I've found a way works fine with jQuery:
最后，我找到了一种适用于 jQuery 的方法：
Apply -webkit-overflow-scrolling property every time when you touch up.
每次触摸时应用 -webkit-overflow-scrolling 属性。
*At first I Applied Also -webkit-overflow-scrolling:autowhen TouchDown, to disable iOS rendering. But it made Page blink. So I dropped it away, then works fine surprisingly!
*起初我还应用了-webkit-overflow-scrolling:auto当TouchDown 时，禁用 iOS 渲染。但这让佩奇眨了眨眼。所以我把它扔掉了，然后令人惊讶地工作正常！
Check lines below, hope it helps:
检查下面的行，希望它有帮助：
<!-- 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>
