Mengapa Teks Chrome Saya Kabur Selepas Transformasi CSS, dan Bagaimana Saya Boleh Membetulkannya?

Teks Kabur dalam Chrome Selepas Transformasi CSS: Menyelesaikan dengan Keterlihatan Muka Belakang Tersembunyi dan TranslateZ (0)

Menskalakan teks menggunakan transformasi CSS: skala( ) boleh mengakibatkan kekaburan dalam versi terkini Google Chrome. Ini jelas dalam kawasan teks utama http://rourkery.com, di mana teks kelihatan comot selepas transformasi.

Penyelesaian kepada isu ini terletak pada menggunakan sifat CSS tertentu. Menambah keterlihatan belakang: tersembunyi memudahkan animasi dengan memfokuskan pada bahagian hadapan objek semata-mata. Sifat translateZ(0) mensimulasikan pecutan perkakasan untuk animasi yang lebih lancar.

Dengan memasukkan sifat ini ke dalam elemen yang terjejas, kekaburan dihapuskan dengan berkesan. Berikut ialah contoh coretan:

@-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);
    backface-visibility: hidden;
    transform: translateZ(0);
  }
}

Untuk menambah kejelasan, sesetengah pembangun juga boleh menyertakan -webkit-font-smoothing: subpixel-antialiased untuk meningkatkan pemaparan fon. Walau bagaimanapun, keperluan hartanah ini berbeza-beza dan tertakluk kepada keutamaan peribadi.

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