HTMLページスクロール時の要素ずれの解決策_html/css_WEB-ITnose

より複雑なレイアウトのページをモバイル ブラウザで実行すると、スクロール バーをスクロールした後に設定が不十分な一部の携帯電話が表示されます。ページは通常どおりスクロールしますが、一部の要素は位置: 固定、通常はフロートと同様に表示されます。ページ上でもう一度スクロールします。視差スクロールのように見えますが、まったく美しくありません。

解決策: スライドボディにスタイルを追加します:transform:transform:transform:Z(0); -webkite-transform:transform:Z(0)。

<div style="height:300px;overflow:auto">    <div style="transform:translateZ(0);-webkite-transform:translateZ(0);">          各种复杂的html      <div></div>

これを追加する目的は、GPU アクセラレーション (GPU キャッシュ) を活用することです。

この問題のせいで、overflow:auto を使ってページをスライド（HTML スクロールバー形式）すると、ページがスライドするたびにブラウザで頻繁にスクロール、レイヤーツリーの更新、合成レイヤーが発生することもわかりました。最後のリンクに問題があるはずです。この問題の原因はレイアウト方法にあるはずです。