Pourquoi mon texte est-il flou après avoir utilisé CSS « transform : scale() » dans Chrome ?

Correction du texte flou après la transformation CSS : scale() dans Chrome

Les utilisateurs de Chrome ont signalé un problème récent où le texte devient flou après l'application d'un transformation : animation scale(). Ce problème est exclusif à Chrome et n'affecte pas les autres navigateurs Webkit comme Safari.

L'animation CSS suivante est à l'origine du flou :

@-webkit-keyframes bounceIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(.3);
  }

  50% {
    opacity: 1;
    -webkit-transform: scale(1.05);
  }

  70% {
    -webkit-transform: scale(.9);
  }

  100% {
    -webkit-transform: scale(1);
  }
}

Pour résoudre ce problème, vous pouvez utiliser soit des propriétés suivantes :

• Backface Visibilité :

backface-visibility: hidden;

Cette propriété simplifie l'animation pour n'affecter que l'avant de l'objet, éliminant l'effet de flou provoqué par la surface arrière.

• TranslateZ :

transform: translateZ(0);

TranslateZ force l'accélération matérielle sur l'animation, ce qui peut corrige également le flou.

De plus, vous pouvez choisir d'inclure la propriété suivante pour améliorer le rendu :

-webkit-font-smoothing: subpixel-antialiased;

Cela peut légèrement modifier l'apparence des polices Web, mais cela peut valoir la peine expérimenter.

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!