Mengapa Teks Menjadi Kabur Apabila Menggunakan translate3d dan Skala dalam Penyemak Imbas WebKit?

Berurusan dengan Teks Kabur dalam Penyemak Imbas WebKit: Penskalaan CSS dan translate3d

Pelayar berasaskan WebKit, termasuk Chrome dan Safari, sering mempamerkan pelik isu di mana elemen berskala CSS menjadi sangat kabur apabila digabungkan dengan transformasi translate3d. Pembangun biasanya menghadapi cabaran ini apabila cuba menggunakan transformasi sambil mengekalkan penskalaan yang betul.

Untuk menggambarkan masalah, pertimbangkan coretan kod berikut:

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

.testInner {
  -webkit-transform: scale(1.2);
  text-align: center;
}

Dalam contoh ini, elemen "testInner" diterjemahkan di sepanjang paksi-Y dan berskala dengan faktor 1.2. Apabila dilihat dalam penyemak imbas WebKit, teks dalam elemen "testInner" kelihatan jelas kabur.

Memahami Isu

Pelayar WebKit mengendalikan elemen diubah 3D sebagai tekstur, memanfaatkan pecutan perkakasan untuk prestasi yang lebih baik. Walau bagaimanapun, rawatan ini membawa kepada kelemahan dalam kejelasan teks.

Potensi Penyelesaian

Malangnya, tiada penyelesaian yang mudah untuk isu ini. Untuk mengurangkan kekaburan, pertimbangkan untuk mengguna pakai salah satu daripada pendekatan berikut:

• Tingkatkan Saiz Teks dan Elemen Turun Skala: Teknik ini melibatkan pembesaran teks dan mengecilkan elemen untuk menghasilkan elemen yang lebih tinggi -tekstur resolusi. Ini mengimbangi kekaburan yang wujud yang diperkenalkan oleh pemaparan WebKit.

Contoh:

.testInner {
  -webkit-transform: translate3d(0px, 100px, 0px) scale(1, 0.8);
  text-align: center;
}

• Menambah Bayangan Teks: Walaupun kaedah sebelumnya menangani kekaburan, ia boleh mengakibatkan kualiti antialiasing berkurangan. Untuk mengurangkan perkara ini, pertimbangkan untuk menambah bayangan teks:

Contoh:

.testInner {
  -webkit-transform: translate3d(0px, 100px, 0px);
  text-align: center;
  text-shadow: 1px 1px 1px #000;
}

Kesimpulan

Pengendalian WebKit bagi teks diubah 3D kekal cabaran untuk pembangun yang mencari kejelasan dan skalabiliti. Walaupun kaedah penyelesaian yang dibentangkan menyediakan penyelesaian separa, adalah penting untuk mempertimbangkannya berdasarkan hasil akhir yang diinginkan.

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