Maison > interface Web > tutoriel CSS > le corps du texte

Pourquoi mes polices sont-elles floues dans les boîtes modales Chrome ?

Susan Sarandon
Libérer: 2024-11-12 11:43:01
original
1006 Les gens l'ont consulté

Why Are My Fonts Blurry in Chrome Modal Boxes?

Polices Chrome floues dans les boîtes modales : dépannage et résolution

Le problème des polices floues dans les boîtes modales Chrome peut être frustrant. Bien que le problème puisse apparaître dans Chrome mais pas dans d'autres navigateurs comme IE et Firefox, la cause première réside souvent dans le CSS plutôt que dans le navigateur lui-même.

Une enquête sur le CSS fourni révèle que le coupable réside dans le CSS. classe pour la boîte modale :

.md-modal {
    ...
    -webkit-transform: translateX(-50%) translateY(-50%);
    ...
}
Copier après la connexion

Cette transformation, qui positionne la boîte modale centrée horizontalement et verticalement, introduit des artefacts de rendu qui brouillent les polices.

Pour résoudre ce problème, le Y- la valeur de traduction de l'axe doit être ajustée en soustrayant 0,5 px :

.md-modal {
    ...
    -webkit-transform: translateX(-50%) translateY(calc(-50% - .5px));
    ...
}
Copier après la connexion

Cette modification déplace effectivement la boîte modale légèrement vers le haut, éliminant ainsi le problème de texte flou.

Remarque : Il est important de noter que le nom de la classe CSS « ​​.md-modal » peut varier selon l'application. L'utilisateur doit identifier la classe CSS correspondante qui définit la transformation et appliquer l'ajustement suggéré.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal