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

Chrome で画像のぼやけや動きを引き起こす CSS トランジション効果?

Chrome で画像のぼやけや動きを引き起こす CSS トランジション効果の問題は、以下の可能性があります。特定の要素を操作するときの CSS トランジションの制限に起因するcontexts.

問題

動き (変換) を伴う要素にトランジションを適用すると、次のような望ましくない副作用が発生する可能性があります。

• 画像のぼやけ
• による画像の微妙な動き1px

この問題は、ページにスクロールバーがある場合にさらに顕著になり、影響を受ける要素のインスタンスが複数存在する場合に特に顕著です。

解決策

この問題を軽減するには、影響を受けるコンポーネントに次の CSS プロパティを適用できます。 element:

-webkit-backface-visibility: hidden;
-webkit-transform: translateZ(0) scale(1, 1);

説明

• -webkit-backface-visibility: hidden: このプロパティは、ブラウザーに要素を 2D として表示し、デフォルトの背面レンダリングを防止します。 artifacts.
• -webkit-transform:translateZ(0)scale(1, 1): このプロパティは、Z 軸変換を常に 0 に強制します。これは、要素の作成にも寄与します。より 2D に見えます。

追加注

• これらのプロパティは、元々 Chrome の古いバージョンでは -webkit- という接頭辞が付いていました。ただし、現在のバージョンでは、プレフィックスのないバージョンを使用できます:

backface-visibility: hidden;
transform: translateZ(0) scale(1, 1);

• 最適なレンダリング結果を得るには、最新バージョンの Chrome を使用することをお勧めします。
• 前の回答で説明したように、画像レンダリング CSS プロパティを使用して、遷移中の画質をさらに向上させることを検討してください。

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