Mengapa Teks Saya Kabur dalam Chrome Selepas Transformasi CSS?

Chrome Mengaburkan Teks Selepas Transformasi CSS: Panduan Membetulkan

Dalam kemas kini Chrome baru-baru ini, pengguna telah menghadapi isu pelik apabila teks menjadi kabur selepas menggunakan sifat transform: scale(). Pembangun yang mencari bantuan menerangkan masalah ini dalam siaran berikut:

Penerangan Masalah:

I'm using @-webkit-keyframes with a scale transform to animate text on my website. However, it's becoming blurry after the scale animation. This wasn't an issue before and doesn't occur in other Webkit browsers like Safari.

Penyelesaian:

Penyelesaian yang dicadangkan melibatkan penggunaan satu atau kedua-dua sifat CSS berikut untuk menyelesaikan pemaparan isu:

1. Keterlihatan Muka Belakang Tersembunyi: Sifat ini mengehadkan animasi ke hadapan objek, menghapuskan animasi lalai pada kedua-dua bahagian hadapan dan belakang.

backface-visibility: hidden;

2. TranslateZ: Ini ialah penyelesaian untuk mengaktifkan perkakasan pecutan untuk animasi.

transform: translateZ(0);

Selain itu, sesetengah pengguna telah melaporkan kejayaan dengan menambahkan sifat berikut:

-webkit-font-smoothing: subpixel-antialiased;

Walaupun kaedah ini boleh mengubah pemaparan fon web, ia patut dicuba untuk hasil yang optimum. Menggunakan mana-mana penyelesaian ini atau gabungannya harus membetulkan isu teks kabur selepas transformasi CSS dalam Chrome.

Atas ialah kandungan terperinci Mengapa Teks Saya Kabur dalam Chrome Selepas Transformasi CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!