Mengapakah Animasi WebKit Translate3d Mengaburkan Teks Saya?

Isu Teks Kabur Berasaskan Webkit dalam Animasi Translate3d: Enigma Berterusan

Pelayar berasaskan WebKit, termasuk iPhone di mana-mana, telah dibelenggu oleh isu berterusan yang nyata sebagai teks kabur atau herot apabila menggunakan translate3d untuk animasi.

Walaupun penyiasatan meluas, punca sebenar fenomena ini masih sukar difahami. Pelbagai penyelesaian, seperti mengalih keluar kedudukan relatif dan melaksanakan -webkit-font-smoothing: antialiased, telah terbukti tidak berkesan.

Satu-satunya penyelesaian yang boleh dipercayai yang dikenal pasti setakat ini ialah meninggalkan translate3d dan menggunakan animasi berasaskan JavaScript tulen. Walau bagaimanapun, ini dikenakan penalti prestasi yang ketara pada peranti yang didayakan WebKit.

Seorang pengguna telah melaporkan pembetulan separa dengan memperkenalkan pelarasan piksel pecahan kepada nilai translate3d. Coretan kod berikut menunjukkan pendekatan ini:

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

Walaupun penyelesaian ini mungkin memberikan sedikit kelegaan, ia gagal menangani isu asas dan mungkin tidak sesuai untuk semua senario.

Sebagai mencari penyelesaian yang lebih mantap diteruskan, pembangun terpaksa mengimbangi prestasi dan kesetiaan grafik, dengan mengambil kira kelebihan translate3d berbanding potensi kemerosotan teks. Harapan kekal bahawa resolusi muktamad akan muncul, membolehkan pemaparan teks animasi yang lancar merentas semua platform.

Atas ialah kandungan terperinci Mengapakah Animasi WebKit Translate3d Mengaburkan Teks Saya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!