Pourquoi les polices sont-elles floues dans les modaux Chrome et comment puis-je y remédier ?

Flou des polices dans Chrome

Malgré son attrait, les utilisateurs de Chrome peuvent rencontrer un problème où les polices apparaissent floues, en particulier dans les zones modales. Bien que cette anomalie ne soit pas apparente dans d'autres navigateurs comme IE ou Firefox, Chrome présente ce comportement déconcertant.

Pour approfondir, un utilisateur a examiné le CSS associé à une étiquette nommée "Démarrer". Ils ont remarqué une règle CSS qui provoquait l'apparence floue :

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

Cette règle positionne l'élément modal au centre de l'écran. Cependant, sa suppression entraîne la perte par le modal de son alignement central.

La solution

Heureusement, une solution a été trouvée en effectuant un léger ajustement de la valeur de l'axe Y dans la propriété de transformation. Au lieu d'utiliser translateY(-50%), l'utilisateur a soustrait 0,5px, ce qui a donné :

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

Cette modification subtile a résolu le flou de la police tout en conservant le centrage souhaité de l'élément modal. Cette approche fournit une solution plus propre et plus simple que la modification des pourcentages ou l'utilisation de solutions de contournement JavaScript.

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!