Mengapa Fon Chrome Kabur dalam Kotak Modal?

Fon Chrome Kabur dalam Kotak Modal

Isu ini timbul apabila Chrome memaparkan fon kabur dalam kotak modal, walaupun fon kelihatan jelas dalam kotak lain pelayar seperti IE dan Firefox. Siasatan mendedahkan bahawa masalahnya terletak dalam sifat transformasi dalam CSS untuk bekas modal.

Peraturan CSS yang menyinggung ialah:

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

Peraturan ini bertanggungjawab untuk memusatkan kotak modal secara mendatar dan menegak dengan menterjemahkannya sebanyak 50% dalam kedua-dua arah. Walau bagaimanapun, dalam Chrome, terjemahan ini menghasilkan fon kabur.

Penyelesaian adalah untuk mengubah suai nilai translateX() dan translateY(). Dengan menolak 0.5px daripada nilai translateY(), isu pemaparan boleh diselesaikan. Berikut ialah coretan yang diperbetulkan:

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

Perubahan ini akan memastikan bahawa modal masih dipusatkan dengan tepat, sambil menghapuskan pemaparan fon yang kabur. Ia menyediakan penyelesaian yang lebih bersih berbanding dengan melaraskan peratusan atau menggunakan pembetulan JavaScript.

Perlu diingat bahawa CSS yang ditunjukkan di atas adalah untuk kelas ".md-modal" dan isu fon kabur mungkin berlaku dalam konteks lain di mana kotak modal digunakan. Dalam kes sedemikian, penyelesaian yang sama boleh digunakan dengan mengedit peraturan CSS yang berkaitan yang bertanggungjawab untuk memusatkan modal.

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