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

Teka-teki Teks Kabur WebKit dengan Penskalaan CSS dan Translate3D

Dalam Chrome dan penyemak imbas WebKit lain, gunakan penskalaan CSS bersama hasil translate3d dalam kekaburan yang tidak diingini kesan untuk kandungan berskala. Satu contoh yang ketara tentang perkara ini boleh dilihat dalam JS Fiddle yang disediakan.

Memahami Isu

Pelayar WebKit pada asasnya menganggap elemen ubah 3D sebagai tekstur untuk pecutan 3D perkakasan. Pendekatan ini membawa kepada artifak kabur apabila elemen ini menjalani kedua-dua penskalaan dan translate3d.

Cadangan Penyelesaian

Malangnya, tiada penyelesaian langsung untuk isu khusus ini. Walau bagaimanapun, seseorang boleh mengurangkan kekaburan dengan meningkatkan saiz teks dan mengecilkan keseluruhan elemen. Ini dengan berkesan mencipta tekstur peleraian lebih tinggi, mengurangkan keterlihatan kabur.

Dalam Fiddle yang disediakan (http://jsfiddle.net/SfKKv/), saiz teks telah ditingkatkan dan diimbangi agar sepadan dengan jumlah translate3d yang telah digunakan. Selain itu, bayangan teks telah diperkenalkan untuk menambah baik lagi antialiasing.

Perhatian

Adalah penting untuk mengakui bahawa penyelesaian ini tidak akan menghapuskan kekaburan sepenuhnya, terutamanya dengan fon kecil atau tepi tajam. Jika matlamat utama adalah untuk mencapai teks yang jelas, mungkin perlu mempertimbangkan pendekatan atau teknik rendering alternatif.

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