Mengapa Teks Kabur Apabila Menggunakan Translate3d dan Scale3d dalam Penyemak Imbas WebKit?

Teka-teki Teks Kabur: Penskalaan CSS dan Translate3d dalam WebKit

Pelayar WebKit, termasuk Chrome, mempamerkan isu pelik: teks dalam berskala CSS kandungan menjadi nyata kabur apabila translate3d digunakan serentak. Tingkah laku ini jelas dalam contoh JS Fiddle yang disediakan.

Contoh JS Fiddle:

.test {
  -webkit-transform: translate3d(0px, 100px, 0px);
}

.testInner
{
  -webkit-transform: scale3d(1.2, 1.2, 1);
  text-align: center;
}

<div class="test">
  <div class="testInner">
    This text becomes blurry in WebKit browsers when translate3d and scale3d are applied.
  </div>
</div>

Penyelesaian Masalah:

Untuk mengurangkan isu ini, adalah disyorkan kepada:

• Tingkatkan Saiz Teks: Tambahkan saiz fon teks untuk mengimbangi kekaburan yang disebabkan oleh penskalaan dan terjemahan.
• Elemen Rendah : Kecilkan saiz elemen yang mengandungi supaya muat dengan teks yang diperbesarkan. Ini pada asasnya mencipta tekstur peleraian yang lebih tinggi untuk teks, meningkatkan kejelasan.

Contoh:

/* Increase text size */
.testInner {
  font-size: 1.5em;
}

/* Downscale element */
.test {
  -webkit-transform: translate3d(0px, 100px, 0px) scale(0.8);
}

Nota:

Walaupun penyelesaian ini menangani isu kabur, ia masih boleh mengakibatkan subpar antialiasing. Untuk meningkatkan kebolehbacaan, pertimbangkan untuk menambahkan sedikit bayangan teks pada teks dalam elemen .testInner.

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