Maison >interface Web >tutoriel CSS >Pourquoi mon texte est-il flou après la mise à l'échelle CSS dans Chrome et comment puis-je y remédier ?

Pourquoi mon texte est-il flou après la mise à l'échelle CSS dans Chrome et comment puis-je y remédier ?

DDD
DDDoriginal
2024-12-15 14:50:35607parcourir

Why is My Text Blurry After CSS Scaling in Chrome, and How Can I Fix It?

Résolution du texte flou après la mise à l'échelle CSS dans Chrome

Les utilisateurs de Chrome ont récemment rencontré un texte flou après l'application de la transformation CSS : scale(), en particulier avec les suivants :

 0% {</p><pre class="brush:php;toolbar:false">opacity: 0;
-webkit-transform: scale(.3);

}

50 % {

opacity: 1;
-webkit-transform: scale(1.05);

}

70 % {

-webkit-transform: scale(.9);

}

100% {

-webkit-transform: scale(1);

}
}

Ce problème persiste spécifiquement dans Chrome, à l'exclusion des autres navigateurs Webkit comme Safari.

解决方案:

Pour atténuer cela problème, deux méthodes se sont révélées efficaces :

1. Visibilité de la face arrière :

Le réglage de la visibilité de la face arrière sur "caché" concentre le rendu sur la face avant de l'objet, atténuant ainsi le problème :

backface-visibility: Hidden;<br> 

2. TranslateZ :

L'utilisation de la propriété TranslateZ force l'accélération matérielle, corrigeant efficacement le flou :

transform: TranslateZ(0);<br>

En option, une clarté supplémentaire peut être obtenue en intégrant :

-webkit-font-smoothing: subpixel-antialiased;<br>

Expérimenter différentes combinaisons peut améliorer encore le résultat du rendu.

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!

Déclaration:
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