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

Question

正如标题所说，在使用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中的所有内容都会隐藏起来。任何人遇到这个问题并解决了它，或者这只是移动Safari的标准行为，以节省内存，我们对此无能为力？

感谢任何帮助:-)

Answer 1

你有没有试过把元素放入内存？

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

您可能希望根据性能在嵌套中进行更高或更低的嵌套，即将转换应用于.page或.item。这将增加内存使用，这可能会崩溃，但它有助于浏览器重新绘制所有内容。

无论如何，希望这能有所帮助！

Answer 2

这可能与webkit中的一个bug有关。如果你有任何"position: relative“或”absolute“，你的代码应该工作得很好。