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

Kekaburan Fon dalam Chrome

Walaupun tarikannya, pengguna Chrome mungkin menghadapi masalah apabila fon kelihatan kabur, terutamanya dalam kotak modal. Walaupun anomali ini tidak kelihatan dalam penyemak imbas lain seperti IE atau Firefox, Chrome mempamerkan tingkah laku yang membingungkan ini.

Untuk menyelidiki lebih mendalam, seorang pengguna memeriksa CSS yang dikaitkan dengan label bernama "Mula." Mereka melihat peraturan CSS yang menyebabkan penampilan kabur:

.md-modal {
    transform: translateX(-50%) translateY(-50%);
}

Peraturan ini meletakkan elemen ragam di tengah-tengah skrin. Walau bagaimanapun, mengalih keluarnya mengakibatkan mod kehilangan penjajaran tengahnya.

Penyelesaian

Nasib baik, penyelesaian ditemui dengan membuat sedikit pelarasan pada nilai paksi Y dalam harta transformasi. Daripada menggunakan translateY(-50%), pengguna menolak 0.5px, menghasilkan:

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

Pengubahsuaian halus ini menyelesaikan kekaburan fon sambil mengekalkan pemusatan elemen modal yang dikehendaki. Pendekatan ini menyediakan penyelesaian yang lebih bersih dan lebih mudah berbanding dengan mengubah peratusan atau menggunakan penyelesaian JavaScript.

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