Mengapa Adakah -webkit-transform: translate3d Menyebabkan Teks Kabur dalam Penyemak Imbas Berasaskan WebKit?

Teks Kabur Pasca Animasi dalam Penyemak Imbas Berasaskan WebKit Melalui Translate3d

Animasi tertentu yang dilaksanakan menggunakan -webkit-transform: translate3d dalam berasaskan WebKit penyemak imbas, seperti iPhone, boleh mengakibatkan teks kabur atau herot. Isu ini berpunca daripada enjin pemaparan penyemak imbas dan kekal berterusan walaupun terdapat percubaan untuk mengurangkannya melalui penyelesaian CSS seperti mengalih keluar kedudukan relatif atau menggunakan -webkit-font-smoothing: antialiased.

Sementara kaedah animasi berasaskan JavaScript menyelesaikan isu ini , ia menghalang prestasi pada peranti berdaya WebKit. Untuk mengelakkan masalah tanpa mengorbankan kelajuan, penyelesaian melibatkan mengubah sedikit nilai transformasi:

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

Imbang pecahan ini berkesan menghapuskan kekaburan, sambil mengekalkan faedah prestasi animasi translate3d.

Atas ialah kandungan terperinci Mengapa Adakah -webkit-transform: translate3d Menyebabkan Teks Kabur dalam Penyemak Imbas Berasaskan WebKit?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!