Mengapa Peralihan Webkit-Transform Saya Berkelip-kelip, dan Bagaimana Saya Boleh Membetulkannya?

Isu Kelipan dengan Transisi Webkit-Transform

Dalam senario di mana peralihan harta webkit-transform menyebabkan kelipan yang ketara, berikut ialah penyelesaian masalah butiran dan penyelesaian yang dicadangkan.

Punca Flicker

Sebab asas kelipan berpunca daripada proses pemaparan penyemak imbas. Sebelum peralihan dimulakan, penyemak imbas membuat seketika elemen dalam keadaan berubah terakhirnya, yang membawa kepada gangguan visual yang tidak diingini.

Penyelesaian

Penyelesaian kepada isu ini berikut strategi mudah:

1. Cari elemen yang mengalami berkelip.
2. Tambahkan sifat CSS berikut pada elemen:

-webkit-backface-visibility: hidden;

Sifat ini menghalang penyemak imbas daripada memaparkan muka belakang elemen, memastikan peralihan antara keadaan adalah lancar dan lancar.

Nota Tambahan

Sebagai diperhatikan dalam pertanyaan asal, isu ini memberi kesan terutamanya kepada Safari. Walaupun animasi mungkin berfungsi dalam penyemak imbas lain, kelipan mungkin berterusan dalam Safari semata-mata. Dengan menggunakan penyelesaian yang dinyatakan di atas, artifak visual ini boleh dihapuskan.

Atas ialah kandungan terperinci Mengapa Peralihan Webkit-Transform Saya Berkelip-kelip, dan Bagaimana Saya Boleh Membetulkannya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!