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

Pour ajouter à l'engouement pour la correction, j'ai mis {border:1px solid #???} autour de l'objet qui a l'air mauvais, ce qui règle le problème pour moi. Si vous avez une couleur d'arrière-plan stable, pensez-y aussi. C'est tellement stupide que personne n'a pensé à le mentionner, je suppose, eh eh.

Answer 2

Dans mon cas, l'erreur était que l'animation était définie sur une div parente de l'élément animé (un SVG). La div parente avait une largeur folle, comme 466,667px. Régler cette largeur sur un nombre impair n'aurait rien changé. Mais : cibler le SVG lui-même avec l'animation (au lieu du conteneur parent).

Answer 3

Pour tous ceux qui liront dans le futur : Dans mon cas, le problème était que j'ai ajouté :

perspective: 2500px;

Vers un élément parent. La suppression de cette propriété a permis de résoudre le problème.

Answer 4

Essayez de jouer avec la valeur du zoom sur le bloc animé. Dans mon cas, zoom : 99.6% ; corrige totalement le texte flou. Mais par exemple, avec la valeur 99.7% le texte est toujours flou, donc dans chaque cas cette valeur peut varier.

Answer 5

Ce qui a marché pour moi, c'est d'enlever backdrop-filter: blur(8px); . Alors que ce filtre était seulement appliqué à l'arrière-plan d'une <div> et non à son texte, il semble que la simple présence de cette propriété amène Chrome à rendre le texte légèrement flou lorsqu'il est utilisé avec la propriété transform: scale(); .