使用 '-webkit-overflow-scrolling: touch' 在滚动/拖动时隐藏内容答案

【问题标题】：Using '-webkit-overflow-scrolling: touch' hides content while scrolling/dragging使用 '-webkit-overflow-scrolling: touch' 在滚动/拖动时隐藏内容
【发布时间】：2012-04-05 19:10:12
【问题描述】：

正如标题所说，我在使用 CSS 属性 -webkit-overflow-scrolling: touch 时滚动/拖动内容时遇到了隐藏内容的问题。

为了基本了解，这是我的标记

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

还有 CSS：

.page {
    width: 320px;
    height: 366px;
    overflow: scroll;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}

代码本身运行良好，我可以滚动浏览内容，但是当我滚动/拖动时，项目 div 内的所有内容都被隐藏了。任何人都遇到过这个问题并解决了它，还是只是 Mobile Safari 的标准行为来节省内存而我们对此无能为力？

任何帮助表示赞赏:-)

【问题讨论】：

标签： css webkit mobile-safari

【解决方案1】：

您是否尝试过将元素放入内存中？

如果没有，请尝试使用 css -webkit-transform: translate3d(0,0,0); 将 .items 放入内存中

您可能希望根据性能提高或降低嵌套，即将翻译应用于 .page 或 .item。这将增加使用的内存，这可能会导致崩溃，但它有助于浏览器重绘所有内容。

无论如何，希望对您有所帮助！

【讨论】：

仍然有问题，解决方案对我不起作用codepen.io/laserpen/pen/Nogmex
我发现这部分可行，但渲染伪影很差 - 当我滚动时，绝对定位的元素会结结巴巴

【解决方案2】：

这可能与 webkit 中的错误有关。如果您有任何“位置：相对”或绝对值，您的代码应该可以正常工作。

【讨论】：