Mengapa Teks Saya Kabur dalam Chrome Selepas Menggunakan `transform: scale()`?

Kekaburan Teks dalam Chrome selepas transformasi: skala()

Dalam kemas kini Chrome baru-baru ini, isu pelik telah muncul apabila teks yang diberikan menggunakan transformasi CSS : harta skala() kelihatan kabur. Isu ini telah diperhatikan apabila menggunakan kod khusus ini:

@-webkit-keyframes bounceIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(.3);
  }

  50% {
    opacity: 1;
    -webkit-transform: scale(1.05);
  }

  70% {
    -webkit-transform: scale(.9);
  }

  100% {
    -webkit-transform: scale(1);
  }
}

Melawati rourkery.com dalam Chrome mendedahkan masalah pada kawasan teks utama, manakala penyemak imbas WebKit lain (seperti Safari) nampaknya tidak terjejas.

Penyelesaian kepada Teka-teki Teks Kabur

Untuk menyelesaikan isu ini, dua pendekatan boleh digunakan:

1. Keterlihatan Muka Belakang Tersembunyi: Teknik ini membetulkan isu dengan memudahkan animasi pada bahagian hadapan objek sahaja, menghapuskan keadaan lalai depan dan belakang.

   backface-visibility: hidden;

2. TerjemahZ: Godam ini mengaktifkan pecutan perkakasan untuk animasi, menyelesaikan masalah pemaparan dengan berkesan.

   transform: translateZ(0);

Selain itu, sesetengah pengguna mendapati menambah sifat berikut bermanfaat:

-webkit-font-smoothing: subpixel-antialiased;

Atas ialah kandungan terperinci Mengapa Teks Saya Kabur dalam Chrome Selepas Menggunakan `transform: scale()`?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!