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

Vous pouvez utiliser le css filter pour régler ce problème.

.element {
    filter: blur(0);
}

sur le préfixe du fournisseur, veuillez le faire vous-même. -webkit-filter , -ms-filter . le détail est ici http://browser.colla.me/show/css_transformation_scale_cause_blurring