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

Police Chrome floue dans la boîte modale

Ce problème survient lorsque Chrome affiche des polices floues dans une boîte modale, bien que la police apparaisse claire dans d'autres navigateurs comme IE et Firefox. Les enquêtes ont révélé que le problème réside dans la propriété transform dans le CSS du conteneur modal.

La règle CSS incriminée est la suivante :

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

Cette règle est responsable du centrage horizontal de la boîte modale et verticalement en le traduisant de 50% dans les deux sens. Cependant, dans Chrome, cette traduction entraîne des polices floues.

La solution est de modifier les valeurs translateX() et translateY(). En soustrayant 0,5px de la valeur translateY(), le problème de rendu peut être résolu. Voici l'extrait corrigé :

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

Ce changement garantira que le modal est toujours centré avec précision, tout en éliminant le rendu flou de la police. Il fournit une solution plus propre que l'ajustement des pourcentages ou l'utilisation de correctifs JavaScript.

Gardez à l'esprit que le CSS présenté ci-dessus concerne la classe ".md-modal" et que le problème de police floue peut survenir dans d'autres contextes où une boîte modale est utilisée. Dans de tels cas, la même solution peut être appliquée en modifiant la règle CSS correspondante chargée de centrer le modal.

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!