タイトルが示すように、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-transform: translate3d(0,0,0);
を使用して.itemsをメモリに入れてみてください
パフォーマンスに応じて、ネストをより高くまたは低くしたい場合があります。つまり、.pageまたは.itemへの変換を適用します。これにより、使用されるメモリが増加し、クラッシュする可能性がありますが、ブラウザがすべてを再描画するのに役立ちます。
とにかく、それが役に立てば幸い!
これはおそらくwebkitのバグに関係しています。 「position:relative」または「absolute」がある場合、コードは問題なく機能するはずです。