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

Rien de ce qui précède n'a fonctionné pour moi. J'avais cette animation pour les popups :

@keyframes pulse {
  from {
    transform: scale3d(1, 1, 1);
  }
  50% {
    transform: scale3d(1.05, 1.05, 1.05);
  }
  to {
    transform: scale3d(1, 1, 1);
  }
}

Dans mon cas, l'effet de flou a disparu après avoir appliqué cette règle : -webkit-perspective: 1000; même s'il est marqué comme inutilisé dans l'inspecteur de Chrome.

Answer 2

Aucune des propositions ci-dessus n'a fonctionné pour moi.

Ça a marché quand j'ai ajouté la perspective

c'est-à-dire de

transform : translate3d(-10px,-20px,0) scale3d(0.7,0.7, 1)

j'ai changé pour

transform : perspective(1px) translate3d(-10px,-20px,0) scale3d(0.7,0.7, 1)

Answer 3

J'ai utilisé une combinaison de toutes les réponses et c'est ce qui a fonctionné pour moi à la fin :

.modal .modal--transition {
  display: inline-table;
  transform: perspective(1px) scale(1) translateZ(0);
  backface-visibility: hidden;
  -webkit-font-smoothing: subpixel-antialiased;
}

Answer 4

Ma solution était :

affichage : initial ;

Alors c'était croustillant et net

Answer 5

J'étais confronté au problème du texte flou sur Chrome mais pas sur Firefox lorsque j'utilisais transform: translate(-50%,-50%) .

Eh bien, j'ai vraiment essayé beaucoup de solutions de contournement comme :

transform: perspective(1px);

filter: blur(0);

transform: translateZ(0);

backface-visibility: hidden;

Aucun d'entre eux n'a fonctionné pour moi.

Enfin, j'ai uniformisé la hauteur et la largeur de l'élément. Cela a résolu le problème pour moi !!!

Nota: Cela peut dépendre de chaque cas d'utilisation. Mais cela vaut certainement la peine d'essayer !