Mengapa Imej Beralih CSS Saya Kabur atau Beralih 1px dalam Chrome?

Imej Kabur Peralihan CSS Chrome atau 1px Beralih

Isu biasa timbul apabila menggunakan peralihan CSS untuk memindahkan div: imej dalam div menjadi kabur atau beralih sedikit. Tingkah laku pelik ini hanya berlaku apabila peralihan melibatkan terjemahan dan apabila halaman mengandungi bar skrol.

Untuk menyelesaikan isu ini, anda boleh melaksanakan sifat CSS berikut pada div yang terjejas:

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

Oleh berbuat demikian, anda dengan berkesan menjadikan bahagian itu kelihatan lebih "2D." Berikut ialah penjelasan tentang tujuan setiap sifat:

• -webkit-backface-visibility: hidden: Sifat ini menyembunyikan muka belakang bahagian, yang biasanya dilukis secara lalai untuk membenarkan flipping dan kesan putaran. Memandangkan anda hanya melakukan terjemahan mudah, menyembunyikan muka belakang menghapuskan pemaparan yang tidak perlu.
• -webkit-transform: translateZ(0) scale(1, 1): Sifat ini memperuntukkan Z- terjemahan paksi kepada sifar, dengan berkesan meratakan bahagian dalam ruang 3D. Chrome mengendalikan sifat ini secara asli, tetapi ia disertakan dengan awalan -webkit- untuk keserasian dengan versi Chromium yang lebih lama.

Atas ialah kandungan terperinci Mengapa Imej Beralih CSS Saya Kabur atau Beralih 1px dalam Chrome?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!