Mengapa Imej Saya Kabur Semasa Peralihan CSS Chrome dan Bagaimana Saya Boleh Membetulkannya?

Membetulkan Imej Kabur dalam Peralihan CSS Chrome dengan Terjemahan

Apabila menggunakan kesan peralihan CSS yang menterjemahkan div, kesan sampingan yang malang dalam Chrome boleh berlaku. Imej dalam div mungkin kelihatan kabur atau bergerak sedikit, mengganggu keselarasan visualnya.

Isu ini timbul disebabkan oleh peralihan yang mengubah sifat tiga dimensi div, menyebabkan pemaparan imej menjadi tidak konsisten. Untuk menangani masalah ini, laksanakan perubahan CSS berikut:

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

Kod ini:

• Melumpuhkan pemaparan muka belakang div, memastikan hanya muka hadapan kelihatan dan menghapuskan kekaburan.
• Menetapkan terjemahan paksi Z div kepada sifar, memastikan ia kekal rata.

Chrome pada masa ini menyokong keterlihatan muka belakang dan berubah tanpa awalan -webkit-. Walaupun versi bukan awalan biasanya disyorkan, keserasiannya dengan penyemak imbas lain (seperti Firefox dan Internet Explorer) harus dipertimbangkan sebelum melaksanakannya.

Dengan melaksanakan perubahan ini, anda boleh menghalang imej kabur dengan berkesan dan memastikan kelancaran Peralihan CSS dalam Chrome apabila menterjemah div dengan imej.

Atas ialah kandungan terperinci Mengapa Imej Saya Kabur Semasa Peralihan CSS Chrome dan Bagaimana Saya Boleh Membetulkannya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!