Rumah >hujung hadapan web >tutorial css >Mengapa Fon Chrome Saya Kabur dalam Kotak Modal dan Bagaimana Saya Boleh Membetulkannya?

Mengapa Fon Chrome Saya Kabur dalam Kotak Modal dan Bagaimana Saya Boleh Membetulkannya?

Mary-Kate Olsen
Mary-Kate Olsenasal
2024-11-12 13:44:02736semak imbas

Why Is My Chrome Font Rendering Blurry in a Modal Box and How Can I Fix It?

Chrome Font Rendering Blur Diselesaikan: CSS Culprit Identified

Isu lama fon kabur dalam Chrome telah melanda pengguna selama bertahun-tahun, dengan perdebatan yang tidak berkesudahan tentang puncanya. Dalam keadaan ini, pengguna mengalami kekaburan yang teruk dalam kotak modal dalam Chrome versi 39.

Pemeriksaan menyeluruh terhadap kod CSS yang diberikan menunjukkan bahawa puncanya terletak dalam sifat CSS yang bertanggungjawab untuk meletakkan kotak modal. Khususnya, isu timbul dengan tetapan sifat 'transformasi' terjemahan paksi-Y:

transform: translateX(-50%) translateY(-50%);

Tetapan khusus ini menyebabkan teks dalam modal kelihatan kabur. Dengan bereksperimen dengan nilai, pengguna mendapati bahawa penolakan 0.5px daripada terjemahan paksi-Y menyelesaikan masalah.

CSS yang dikemas kini:

transform: translateX(-50%) translateY(calc(-50% - 0.5px));

Pengubahsuaian ini secara berkesan menajamkan pemaparan fon, menyelesaikan isu kabur tanpa mengubah penjajaran kotak modal. Pengguna menyatakan bahawa penyelesaian ini lebih elegan daripada melaraskan nilai peratusan atau bergantung pada JavaScript.

Atas ialah kandungan terperinci Mengapa Fon Chrome Saya Kabur dalam Kotak Modal dan Bagaimana Saya Boleh Membetulkannya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

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