Mengapa Fon Kotak Modal Chrome Kabur dan Cara Membaikinya?

Fon Chrome Kabur dalam Modal Box: CSS Culprit Resolved

Pengguna Chrome mungkin menghadapi fon kabur dalam kotak modal, manakala penyemak imbas lain seperti IE dan Firefox memaparkannya dengan jelas. Perbezaan ini timbul disebabkan oleh sifat CSS tertentu yang mempengaruhi pemaparan teks.

Isu ini berpunca daripada sifat transformasi yang digunakan pada bekas modal, iaitu transform: translateX(-50%) translateY(-50%). Transformasi ini secara berkesan menggerakkan modal sebanyak separuh lebar dan tingginya, menyebabkan anomali pemaparan yang menjadikan fon kelihatan kabur.

Untuk menyelesaikan isu ini, CSS boleh diubah suai dengan menolak nilai kecil daripada transformasi paksi-Y . Dengan menolak 0.5px daripada nilai negatif 50%, pemaparan teks menjadi licin dan tajam.

Coretan kod yang diperbetulkan ialah:

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

Penyelesaian ini memastikan bahawa modal kekal di tengah semasa menghapuskan isu fon kabur. Dengan memperhalusi CSS, penyemak imbas Chrome boleh memaparkan fon dalam kotak modal dengan kejelasan yang sama seperti penyemak imbas lain.

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