Mengapa Peralihan CSS Saya Menyebabkan Kabur dan Pergerakan Imej dalam Chrome?

Kesan Peralihan CSS Menyebabkan Kabur dan Pergerakan Imej dalam Chrome?

Isu dengan kesan peralihan CSS yang menyebabkan kekaburan imej dan pergerakan dalam Chrome boleh dikaitkan dengan had peralihan CSS apabila memanipulasi elemen dalam konteks tertentu.

The Masalah

Apabila menggunakan peralihan kepada elemen yang melibatkan pergerakan (terjemah), ia boleh membawa kepada kesan sampingan yang tidak diingini seperti:

• Kekaburan imej
• Pergerakan halus imej sebanyak 1px

Isu ini lebih ketara apabila halaman mempunyai bar skrol dan amat jelas apabila berbilang kejadian elemen terjejas hadir.

Penyelesaian

Untuk mengurangkan isu ini, anda boleh menggunakan sifat CSS berikut pada terjejas elemen:

-webkit-backface-visibility: hidden;
-webkit-transform: translateZ(0) scale(1, 1);

Penjelasan

• -webkit-backface-visibility: hidden: Sifat ini mengarahkan penyemak imbas untuk merawat elemen sebagai 2D, menghalang pemaparan muka belakang lalai yang boleh menyebabkan artifak.
• -webkit-transform: translateZ(0) scale(1, 1): Sifat ini memaksa transformasi paksi-Z sentiasa menjadi 0, yang turut menyumbang kepada pembuatan elemen tampil lebih 2D.

Tambahan Nota

• Sifat ini pada asalnya diawali dengan -webkit- untuk versi Chrome yang lebih lama. Walau bagaimanapun, dalam versi semasa, anda boleh menggunakan versi bukan awalan:

backface-visibility: hidden;
transform: translateZ(0) scale(1, 1);

• Adalah disyorkan untuk menggunakan versi terkini Chrome untuk hasil pemaparan yang optimum.
• Pertimbangkan untuk menggunakan sifat CSS pemaparan imej untuk meningkatkan lagi kualiti imej semasa peralihan, seperti yang diterangkan dalam jawapan sebelumnya.

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