Pourquoi mon texte Chrome est-il flou après la transformation CSS et comment puis-je y remédier ?

Texte flou dans Chrome après transformation CSS : résolu avec la visibilité arrière masquée et TranslateZ (0)

Mise à l'échelle du texte à l'aide de la transformation CSS : scale( ) peut entraîner un flou dans les versions récentes de Google Chrome. Cela est évident dans la zone de texte principale de http://rourkery.com, où le texte apparaît taché après transformation.

La solution à ce problème réside dans l'utilisation de propriétés CSS spécifiques. L'ajout de backface-visibility: Hidden simplifie l'animation en se concentrant uniquement sur l'avant de l'objet. La propriété TranslateZ(0) simule l'accélération matérielle pour une animation plus fluide.

En incorporant ces propriétés dans l'élément affecté, le flou est efficacement éliminé. Voici un exemple d'extrait :

@-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);
    backface-visibility: hidden;
    transform: translateZ(0);
  }
}

Pour plus de clarté, certains développeurs peuvent également inclure -webkit-font-smoothing: subpixel-antialiased pour améliorer le rendu des polices. Cependant, la nécessité de cette propriété varie et dépend des préférences personnelles.

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!