Mengapa Penskalaan CSS dan Translate3D Menyebabkan Kekaburan Teks dalam Penyemak Imbas WebKit?

Penskalaan CSS dan Translate3D pada WebKit: Menyebabkan Kekaburan Teks

Pelayar WebKit, termasuk Chrome, mempamerkan isu pelik di mana kandungan berskala CSS mengalami kekaburan yang ketara apabila digabungkan dengan translate3d harta benda. Isu ini menghalang pemaparan kandungan dan memberi kesan kepada pengalaman pengguna.

Dalam JavaScript Fiddle yang disediakan, kita boleh melihat isu tersebut. Kod HTML termasuk dua

elemen, satu dengan kelas "ujian" dan satu lagi bersarang di dalamnya dengan kelas "testInner." CSS menggayakan elemen "ujian" dengan transformasi translate3d, manakala elemen "testInner" termasuk sama ada transformasi skala atau skala3d. Melihat Fiddle ini dalam Chrome mendedahkan teks kabur dalam div "testInner".

Punca isu ini terletak pada layanan WebKit terhadap elemen diubah 3D sebagai tekstur dan bukannya vektor. Pendekatan ini membolehkan pecutan 3D perkakasan tetapi merendahkan kualiti teks. Untuk mengurangkan isu ini, satu penyelesaian melibatkan meningkatkan saiz teks dan mengecilkan elemen, menghasilkan tekstur peleraian lebih tinggi dengan berkesan.

Seperti yang ditunjukkan dalam Fiddle yang dikemas kini, kami boleh meningkatkan saiz teks dalam elemen "testInner" dan menurunkan skala elemen itu sendiri. Pendekatan ini meningkatkan kualiti teks, walaupun antialiasing mungkin masih tidak sempurna. Untuk meningkatkan lagi kebolehbacaan, kami boleh menggunakan bayangan teks untuk menebalkan batang teks.

Dengan menggunakan penyelesaian ini, kami boleh memintas isu kekaburan dan mencapai persembahan kandungan berskala CSS yang lebih menarik secara visual digabungkan dengan translate3d. Adalah penting untuk ambil perhatian bahawa penyelesaian ini mungkin tidak sesuai untuk semua senario; walau bagaimanapun, ia menyediakan alternatif yang berharga dalam kes di mana kualiti teks adalah yang terpenting.

Atas ialah kandungan terperinci Mengapa Penskalaan CSS dan Translate3D Menyebabkan Kekaburan Teks dalam Penyemak Imbas WebKit?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

JavaScript css chrome html webkit for while class Property this issue

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn