Mengapa Peralihan CSS Saya Mengaburkan Imej atau Mengalihkan Div dalam Chrome?

Imej Kabur dan Div Beralih dalam Peralihan CSS dalam Chrome

Dalam peralihan CSS, menggunakan kesan terjemah pada div boleh menyebabkan akibat yang tidak dijangka, seperti imej kabur atau anjakan 1px dalam imej. Isu ini amat ketara apabila bar skrol hadir pada halaman. Penyebab di sebalik masalah ini terletak pada sifat tiga dimensi yang wujud dalam transformasi CSS.

Penyelesaian: Menguatkuasakan Rendering Rata

Untuk membetulkan keadaan ini, sifat CSS -webkit -keterlihatan muka belakang boleh digunakan pada div, memaksa ia kelihatan lebih dua dimensi. Sifat ini memberitahu penyemak imbas supaya tidak memaparkan muka belakang div, dengan berkesan meratakan penampilannya.

Selain itu, tetapan -webkit-transform kepada translateZ(0) skala(1, 1) memastikan div kekal dalam satah dan skala yang sama dengan betul.

Dikemas kini Sintaks:

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

Dengan meratakan div, sifat CSS ini menghalang peralihan daripada memanipulasi sifat tiga dimensi div secara tidak sengaja, menghasilkan peralihan yang lancar dan bebas kabur.

Atas ialah kandungan terperinci Mengapa Peralihan CSS Saya Mengaburkan Imej atau Mengalihkan Div dalam Chrome?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!