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

Membetulkan Teks Kabur Selepas Transformasi CSS: skala() dalam Chrome

Pengguna Chrome telah melaporkan isu terbaru di mana teks menjadi kabur selepas menggunakan transform: skala() animasi. Masalah ini eksklusif untuk Chrome dan tidak menjejaskan penyemak imbas Webkit lain seperti Safari.

Animasi CSS berikut menyebabkan kekaburan:

@-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);
  }
}

Untuk menyelesaikan isu ini, anda boleh menggunakan sama ada daripada sifat berikut:

• Muka belakang Keterlihatan:

backface-visibility: hidden;

Harta ini memudahkan animasi untuk hanya menjejaskan bahagian hadapan objek, menghapuskan kesan kabur yang disebabkan oleh permukaan belakang.

• TranslateZ:

transform: translateZ(0);

TranslateZ memaksa pecutan perkakasan pada animasi, yang juga boleh membetulkan kekaburan.

Selain itu, anda boleh memilih untuk memasukkan sifat berikut untuk meningkatkan pemaparan:

-webkit-font-smoothing: subpixel-antialiased;

Ini boleh mengubah sedikit penampilan Fon web, tetapi mungkin berbaloi untuk mencuba.

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