web-dev-qa-db-ja.com

「-webkit-overflow-scrolling：touch」を使用すると、スクロール/ドラッグ中にコンテンツが非表示になります

タイトルが示すように、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の標準的な動作であり、それについて私たちにできることは何もありませんか？

どんな助けでもありがたいです:-)

csswebkitmobile-safari
15
Björn Kaiser

要素をメモリに入れてみましたか？

そうでない場合は、css -webkit-transform: translate3d(0,0,0);を使用して.itemsをメモリに入れてみてください

パフォーマンスに応じて、ネストをより高くまたは低くしたい場合があります。つまり、.pageまたは.itemへの変換を適用します。これにより、使用されるメモリが増加し、クラッシュする可能性がありますが、ブラウザがすべてを再描画するのに役立ちます。

とにかく、それが役に立てば幸い！

32
tuddy

これはおそらくwebkitのバグに関係しています。 「position：relative」または「absolute」がある場合、コードは問題なく機能するはずです。

4
Emil Bonsaksen