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

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%);
    ...
}

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));
    ...
}

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!