Mengapa Fon Saya Kabur dalam Kotak Modal Chrome?

Fon Chrome Kabur dalam Kotak Modal: Penyelesaian Masalah dan Penyelesaian

Isu fon kabur dalam kotak modal Chrome boleh mengecewakan. Walaupun isu itu mungkin muncul dalam Chrome tetapi tidak dalam penyemak imbas lain seperti IE dan Firefox, punca utama selalunya terletak pada CSS dan bukannya penyemak imbas itu sendiri.

Penyiasatan terhadap CSS yang disediakan mendedahkan bahawa penyebabnya terletak dalam CSS kelas untuk kotak modal:

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

Transformasi ini, yang meletakkan kotak modal secara mendatar dan berpusat menegak, memperkenalkan artifak pemaparan yang mengaburkan fon.

Untuk menyelesaikan isu ini, Y- nilai terjemahan paksi perlu dilaraskan dengan menolak 0.5px:

.md-modal {
    ...
    -webkit-transform: translateX(-50%) translateY(calc(-50% - .5px));
    ...
}

Pengubahsuaian ini dengan berkesan menganjakkan kotak modal ke atas sedikit, menghapuskan isu teks kabur.

Nota: Adalah penting untuk ambil perhatian bahawa nama kelas CSS ".md-modal" mungkin berbeza-beza bergantung pada aplikasi. Pengguna harus mengenal pasti kelas CSS sepadan yang mentakrifkan transformasi dan menggunakan pelarasan yang dicadangkan.

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