CSS 使用“-webkit-overflow-scrolling: touch”在滚动/拖动时隐藏内容
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9801687/
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
Using '-webkit-overflow-scrolling: touch' hides content while scrolling/dragging
提问by Bj?rn Kaiser
as the title says I'm having the problem with content getting hidden while scrolling/dragging the content when using the CSS property -webkit-overflow-scrolling: touch.
正如标题所说，我在使用 CSS 属性时滚动/拖动内容时遇到了隐藏内容的问题-webkit-overflow-scrolling: touch。
For a basic understanding, here is my markup
为了基本的理解，这是我的标记
<div class="page">
<div class="section_title">Title</div>
<div class="items">
<div class="item">...Text and Image...</div>
<div class="item">...Text and Image...</div>
<div class="item">...Text and Image...</div>
</div>
<div class="section_title">Title</div>
<div class="items">
<div class="item">...Text and Image...</div>
<div class="item">...Text and Image...</div>
<div class="item">...Text and Image...</div>
</div>
</div>
And the CSS:
和 CSS：
.page {
width: 320px;
height: 366px;
overflow: scroll;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
}
The code itself works good, I can scroll through the content but everything that is inside of a items div get's hidden while I'm scrolling/dragging. Anyone came across this issue and solved it or is it just standard behavior of Mobile Safari to save memory and there is nothing we can do about it?
代码本身运行良好，我可以滚动浏览内容，但是当我滚动/拖动时，项目 div 中的所有内容都被隐藏了。任何人都遇到过这个问题并解决了它，还是只是 Mobile Safari 节省内存的标准行为而我们对此无能为力？
Any help is appreciated :-)
任何帮助表示赞赏:-)
回答by tuddy
Have you tried putting the elements into memory?
您是否尝试将元素放入内存中？
If not, try putting .items in memory using the css -webkit-transform: translate3d(0,0,0);
如果没有，请尝试使用 css 将 .items 放入内存中 -webkit-transform: translate3d(0,0,0);
You may want to go higher or lower in the nesting depending on performance, ie applying the translate to .page or .item. This will increase the memory used which can get crashy but it helps the browser redraw everything.
您可能希望根据性能提高或降低嵌套，即将翻译应用到 .page 或 .item。这将增加使用的内存，这可能会导致崩溃，但它有助于浏览器重绘所有内容。
Anyways, hope that helps!
无论如何，希望有帮助！
回答by Emil Bonsaksen
This probably has to do with a bug in webkit. If you have any "position: relative" or absolute your code should work just fine.
这可能与 webkit 中的错误有关。如果您有任何“位置：相对”或绝对值，您的代码应该可以正常工作。
