Mengapakah `translate3d` Menyebabkan Teks Kabur Selepas Animasi dalam Penyemak Imbas Webkit?

Penyelewengan Teks Pasca Animasi Akibat Webkit: Membongkar Teka-teki Translate3d

Kelaziman penyemak imbas berasaskan Webkit, termasuk Safari iPhone, telah membawa kepada fenomena yang membingungkan: teks menjadi kabur selepas animasi dikuasakan oleh "-webkit-transform: translate3d." Isu ini telah melanda banyak pembangun, membuatkan mereka bingung.

Dasar isu ini ialah pergantungan tapak pada animasi peluncur berasaskan JavaScript. Walau bagaimanapun, apabila menggunakan translate3d untuk animasi ini, kejelasan teks menurun, terutamanya pada iPhone. "Pembetulan" biasa seperti mengalih keluar kedudukan relatif dan menambah "-webkit-font-smoothing: antialiased" telah terbukti tidak membuahkan hasil.

Satu-satunya penyelesaian berdaya maju yang menghapuskan herotan ini ialah pengabaian translate3d yang memihak kepada animasi JavaScript tulen. Walau bagaimanapun, translate3d menawarkan daya tarikan prestasi unggul pada peranti WebKit. Persoalan yang berlarutan kekal: mengapa translate3d memberikan kesan buruk pada teks?

Walaupun jawapan muktamad masih sukar difahami, penyelesaian telah muncul yang mengurangkan isu:

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

Pendekatan yang tidak ortodoks ini nampaknya mengurangkan kekaburan. Walaupun bukan penyelesaian yang sempurna, ia memberikan sedikit kelegaan daripada kekecewaan teks pasca animasi yang kabur.

Atas ialah kandungan terperinci Mengapakah `translate3d` Menyebabkan Teks Kabur Selepas Animasi dalam Penyemak Imbas Webkit?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!