Texte flou après l'utilisation de CSS transform : scale() ; dans Chrome

Question

Il semble qu'une récente mise à jour de Google Chrome rende le texte flou après avoir effectué un transform: scale() . Plus précisément, je fais ça :

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

Si vous visitez http://rourkery.com dans Chrome, vous devriez voir le problème sur la zone de texte principale. Ce n'était pas le cas auparavant et cela ne semble pas affecter les autres navigateurs webkit (comme Safari). Il y a eu d'autres messages concernant des personnes rencontrant un problème similaire avec les transformations 3D, mais je n'ai rien trouvé concernant les transformations 2D.

Toute idée serait appréciée, merci !

Answer 1

J'ai rencontré ce problème à plusieurs reprises et il semble y avoir deux façons de le résoudre (voir ci-dessous). Vous pouvez utiliser l'une ou l'autre de ces propriétés pour corriger le rendu, ou les deux en même temps.

La visibilité de la face arrière cachée résout le problème, car elle simplifie l'animation en la limitant à l'avant de l'objet, alors que l'état par défaut est l'avant et l'arrière.

backface-visibility: hidden;

TranslateZ fonctionne également car c'est un hack pour ajouter l'accélération matérielle à l'animation.

transform: translateZ(0);

Ces deux propriétés règlent le problème que vous rencontrez, mais certaines personnes aiment aussi ajouter

-webkit-font-smoothing: subpixel-antialiased;

à leur objet animé. Je trouve que cela peut changer le rendu d'une police web mais n'hésitez pas à expérimenter cette méthode également.

Answer 2

Après avoir essayé tout le reste ici sans succès, ce qui a finalement résolu ce problème pour moi était enlever le site will-change: transform; propriété. Pour une raison quelconque, cela a provoqué une mise à l'échelle horriblement floue dans Chrome, mais pas dans Firefox.

Answer 3

Pour améliorer le flou, en particulier sur Chrome, essayez de faire ceci :

transform: perspective(1px) translateZ(0);
backface-visibility: hidden;

UPDATE : Perspective ajoute une distance entre l'utilisateur et le plan z, ce qui met techniquement l'objet à l'échelle, donnant l'impression que le flou est "permanent". Le site perspective(1px) ci-dessus est comme ruban adhésif pour canard parce que nous correspondons au flou que nous essayons de résoudre. Vous aurez peut-être plus de chance avec le css ci-dessous :

transform: translateZ(0);
backface-visibility: hidden;

Answer 4

J'ai trouvé qu'ajuster le rapport d'échelle aidait légèrement.

Utilisation de scale(1.048) en (1.05) semble générer une meilleure approximation de la taille de la police au pixel près, en réduisant le flou au sous-pixel.

J'ai aussi utilisé translateZ(0) qui semble ajuster l'étape finale d'arrondi de Chrome dans l'animation de transformation. C'est un plus pour mon utilisation de la fonction onhover car cela augmente la vitesse et réduit le bruit visuel. Cependant, pour une fonction onclick, je ne l'utiliserais pas, car la police transformée ne semble pas aussi nette.

Answer 5

Au lieu de

transform: scale(1.5);

en utilisant

zoom : 150%;

corrige le problème de flou du texte dans Chrome.