Mengapa Teks Berasaskan Webkit Menjadi Kabur Selepas Animasi Translate3d?

Herohan Teks Berasaskan Webkit Pasca Animasi dengan Translate3d: Isu Berterusan

Isu teks kabur atau terherot selepas elemen animasi menggunakan Webkit pelayar berasaskan telah membelenggu pembangun untuk tempoh yang panjang. Isu ini memberi kesan kepada penyemak imbas seperti Safari dan penyemak imbas lalai iPhone.

Latar Belakang:

Peluncur berasaskan JavaScript sering menggunakan sifat -webkit-transform: translate3d untuk animasi yang lancar. Walau bagaimanapun, teknik ini secara tidak sengaja menyebabkan teks dalam elemen animasi menjadi kabur.

Percubaan Gagal pada Penyelesaian:

Pelbagai penyelesaian telah cuba untuk menyelesaikan isu ini, termasuk:

• Mengalih keluar saudara kedudukan
• Menambah -webkit-font-smoothing: antialiased

Walau bagaimanapun, langkah ini telah terbukti tidak berkesan.

Penyelesaian:

Walaupun meneroka pelbagai pilihan, satu-satunya penyelesaian yang secara konsisten menghapuskan kekaburan teks adalah untuk kembali kepada animasi berasaskan JavaScript, memintas translate3d sama sekali. Walau bagaimanapun, kompromi ini mengorbankan prestasi pada peranti berdaya WebKit.

Penyelesaian Separa:

Walaupun penyelesaian yang komprehensif masih sukar difahami, remedi separa telah ditemui yang mengurangkan herotan agak:

top: 49.9%;
left: 49.9%;
-webkit-transform: translate(-50.1%, -50.1%);
transform: translate(-50.1%, -50.1%);

Teknik ini memperkenalkan sedikit offset 0.1% kepada kedudukan elemen dan berubah. Walaupun ia tidak menghapuskan kabur sepenuhnya, ia mengurangkan kesannya dengan ketara.

Atas ialah kandungan terperinci Mengapa Teks Berasaskan Webkit Menjadi Kabur Selepas Animasi Translate3d?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!