Flou du texte dans Chrome après la transformation : scale()

Dans les récentes mises à jour de Chrome, un problème particulier est apparu lorsque le texte rendu à l'aide de la transformation CSS : la propriété scale() apparaît floue. Ce problème a été observé lors de l'utilisation de ce code spécifique :

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

La visite de rourkery.com dans Chrome révèle le problème dans la zone de texte principale, alors que les autres navigateurs WebKit (comme Safari) ne semblent pas affectés.

Une solution à l'énigme du texte flou

Pour résoudre ce problème, deux approches peuvent être employé :

1. Visibilité de la face arrière cachée : Cette technique résout le problème en simplifiant l'animation uniquement à l'avant de l'objet, éliminant les états avant et arrière par défaut.

   backface-visibility: hidden;

2. TranslateZ : Ce hack active l'accélération matérielle pour l'animation, efficacement résoudre le problème de rendu.

   transform: translateZ(0);

De plus, certains utilisateurs trouvent bénéfique l'ajout de la propriété suivante :

-webkit-font-smoothing: subpixel-antialiased;