Chrome で CSS トランジションにより画像がぼやけたり、Div がずれたりするのはなぜですか?

Chrome の CSS トランジションでのぼやけた画像とシフトされた Div

CSS トランジションで div に翻訳効果を適用すると、予期しない結果が生じる可能性があります。画像のぼやけや画像の 1 ピクセルのシフトなど。この問題は、ページ上にスクロールバーが存在する場合に特に顕著です。この問題の背後にある原因は、CSS 変換の固有の 3 次元の性質にあります。

解決策: フラット レンダリングの強制

この状況を改善するには、CSS プロパティ -webkit -backface-visibility を div に適用して、より 2 次元的に見せることができます。このプロパティは、ブラウザーに div の背面をレンダリングしないように指示し、その外観を効果的に平坦化します。

さらに、 -webkit-transform を translationZ(0)scale(1, 1) に設定すると、div が確実にそのまま残ります。同じ平面と正しくスケールされます。

更新されました構文:

.your-class-name {
    /* ... */
    -webkit-backface-visibility: hidden;
    -webkit-transform: translateZ(0) scale(1, 1);
}

これらの CSS プロパティは、div を平坦化することで、トランジションで div の 3 次元プロパティが不用意に操作されるのを防ぎ、スムーズでぼやけのないトランジションを実現します。

以上がChrome で CSS トランジションにより画像がぼやけたり、Div がずれたりするのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。