Mengapa Translate3d Menyebabkan Teks Kabur dalam Penyemak Imbas Berasaskan WebKit?

Isu Teks Kabur Berasaskan Webkit dalam Elemen Animasi Menggunakan translate3d

Masalah biasa yang dihadapi merentas pelayar berasaskan WebKit, termasuk iPhone, ialah teks herot dan kabur selepas melaksanakan translate3d untuk animasi. Ini boleh menjadi sangat ketara apabila menggunakan -webkit-transform: translate3d sebagai kaedah animasi.

Satu penyelesaian berpotensi yang dicadangkan dalam forum melibatkan mengalih keluar kedudukan relatif dan menambah -webkit-font-smoothing: peraturan antialiased. Walau bagaimanapun, pelarasan ini selalunya terbukti tidak berkesan.

Penyelesaian Kotor

Sebagai penyelesaian yang berpotensi, walaupun bukan penyelesaian yang elegan atau optimum, melaraskan kedudukan dengan menambahkan pecahan pada mengubah nilai telah dilaporkan untuk mengurangkan isu:

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

Teknik ini bergantung pada sedikit mengimbangi transformasi dengan pecahan, yang nampaknya menghalang kesan kabur yang dikaitkan dengan animasi translate3d dalam penyemak imbas WebKit.

Pertimbangan Lain:

Pendekatan alternatif mungkin termasuk:

• Menggunakan animasi berasaskan JavaScript dan bukannya translate3d.
• Menyiasat punca utama herotan teks dalam pelaksanaan khusus dan menanganinya secara langsung.

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