Mengapa teks WebKit kabur apabila menggunakan skala CSS dan translate3d?

Kabur Teks WebKit dengan Skala CSS dan Translate3D

Pembangun menghadapi isu di mana teks yang dipaparkan dalam Chrome dan penyemak imbas WebKit lain menjadi terlalu kabur apabila CSS penskalaan (skala atau skala3d) digabungkan dengan transformasi translate3d. Ini boleh diperhatikan dalam contoh ringkas:

<div class="test">
  <div class="testInner">
    This is blurry in Chrome/WebKit when translate3d and scale or scale3d are applied.
  </div>
</div>

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

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

Penyelesaian:

Menangani isu ini memerlukan pendekatan yang unik kerana WebKit memperlakukan elemen yang diubah 3D sebagai tekstur bukannya vektor. Untuk menyelesaikan kekaburan, besarkan saiz teks dan turunkan skala elemen, menghasilkan tekstur peleraian yang lebih tinggi dengan berkesan.

Contoh yang dikemas kini dengan penyelesaian ini:

<div class="test">
  <div class="testInner">

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

Sementara pendekatan ini berkesan mengurangkan kekaburan, ia mungkin masih menunjukkan beberapa isu antialiasing. Untuk mengurangkan masalah ini, bayangan teks boleh ditambah untuk meningkatkan penampilan teks.

Atas ialah kandungan terperinci Mengapa teks WebKit kabur apabila menggunakan skala CSS dan translate3d?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!