Chrome で CSS トランジション画像がぼやけたり、1 ピクセルずれたりするのはなぜですか?

Chrome CSS トランジションで画像がぼやける、または 1 ピクセルシフトする

CSS トランジションを使用して div を移動する場合、div 内の画像という一般的な問題が発生します。ぼやけたり、微妙にずれたりします。この独特の動作は、トランジションに翻訳が含まれ、ページにスクロールバーが含まれている場合にのみ発生します。

この問題を解決するには、影響を受ける div に次の CSS プロパティを実装できます。

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

Byそうすることで、効果的に分割をより「2D」に見せることができます。各プロパティの目的の説明は次のとおりです。

• -webkit-backface-visibility: hidden: このプロパティは、反転を可能にするために通常デフォルトで描画される分割の背面を非表示にします。そして回転効果。単純な変換のみを実行しているため、背面を非表示にすることで不必要なレンダリングを排除できます。
• -webkit-transform:translateZ(0)scale(1, 1): このプロパティは、Z-軸をゼロに移動し、3D 空間内の分割を効果的に平坦化します。 Chrome はこのプロパティをネイティブに処理しますが、古い Chromium バージョンとの互換性のために -webkit- プレフィックスが含まれています。

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