Chrome で CSS トランジションにより画像がぼやけてしまうのはなぜですか?

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

問題:

次のような CSS トランジション効果を適用する場合区画を移動すると、Chrome は区画内の画像がぼやけたり、わずかにずれたりするなど、望ましくない動作を示します。この問題は、ページにスクロールバーがある場合にのみ発生します。

解決策:

これらの影響を防ぐには、次の CSS を実装します。変更:

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

説明:

• -webkit-backface-visibility: hidden: ディビジョンの背面のレンダリングを無効にします。単純な翻訳には不要です。
• -webkit-transform:translateZ(0)scale(1, 1); 分割の Z 軸移動をゼロに設定し、元のサイズにスケールバックして、画像はそのまま残ります。

2020更新:

• ぼやけた画像の場合は、他の回答で提案されているように、画像レンダリング CSS プロパティの使用を検討してください。
• アクセシビリティと SEO のために、背景画像を img タグで置き換えることを検討してください。そして object-fit CSS プロパティを使用します。

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