iPad Safari のスクロールラグ: `translate3d(0, 0, 0)` で途切れ途切れのスクロールを修正できますか?

iPad Safari のスクロールラグを Translate3D 変換で解決しました

iPad Safari 用の Web アプリケーションを開発する場合、広範囲にわたるスクロール領域がオフの場合に特異な動作を示すことがあります。 - 画面要素は、スクロール時に顕著な遅延が発生した後にのみ表示されます。この途切れの原因は、iPad Safari のメモリ節約の取り組みにあります。

幸いなことに、解決策はブラウザをだましてハードウェア アクセラレーションを利用させることにあります。これは、空の 3 次元変換を適用することで実現できます。

-webkit-transform: translate3d(0, 0, 0);

具体的には、この変換をposition:relative; で子要素に適用します。宣言またはすべての子要素に追加すると、スクロールの応答性が向上します。普遍的な解決策ではありませんが、ほとんどの場合、途切れを解決するのに非常に効果的です。このテクニックは記事「iOS 5 Native Scrolling–Grins & Gotchas」にクレジットされています。

以上がiPad Safari のスクロールラグ: `translate3d(0, 0, 0)` で途切れ途切れのスクロールを修正できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。