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

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><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">opacity: 0;
-webkit-transform: scale(.3);

Copier après la connexion

}

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!