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

Il doit s'agir d'un bogue de Chrome (version 56.0.2924.87), mais la solution ci-dessous corrige le flou pour moi lorsque je modifie les propriétés css dans la console('.0'). Je vais le signaler.

filter: blur(.0px)

Answer 2

Sunderls me conduit à la réponse. Sauf filter: scale n'existe pas, mais filter: blur fait.

Appliquez les déclarations suivantes aux éléments qui apparaissent flous (dans mon cas, ils étaient à l'intérieur d'un élément transformé) :

backface-visibility: hidden;    
-webkit-filter: blur(0);

Il presque a fonctionné parfaitement. " Presque "parce que j'utilise une transition et pendant la transition, les éléments ne sont pas parfaits, mais une fois la transition terminée, ils le sont.

Answer 3

J'ai trouvé une solution bien meilleure et plus propre :

.element{
 transform:scale(0.5) 
 transform-origin: 100% 0;
}

o

.element{
 transform:scale(0.5) 
 transform-origin: 0% 0;
}

Grâce à ce post : Prévention du rendu flou avec transform : scale

Answer 4

Dans mon cas, le code suivant a causé une police floue :

-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);

et le simple fait d'ajouter la propriété de zoom a réglé le problème pour moi. Jouez avec le zoom, ce qui suit a fonctionné pour moi :

zoom: 97%;

Answer 5

J'ai découvert que le problème se produit sur les transformations relatives de quelque manière que ce soit. translateX(50%), scale(1.1) ou quoi que ce soit. fournir des valeurs absolues fonctionne toujours (ne produit pas de textures floues).

Aucune des solutions mentionnées ici n'a fonctionné, et je pense qu'il n'y a pas encore de solution (j'utilise Chrome 62.0.3202.94 au moment où j'écris ces lignes).

Dans mon cas transform: translateY(-50%) translateX(-50%) provoque le flou (je veux centrer un dialogue).

Pour atteindre des valeurs un peu plus "absolues", j'ai dû définir des valeurs décimales à transform: translateY(-50.09%) translateX(-50.09%) .

NOTE

Je suis certain que ces valeurs varient en fonction de la taille de l'écran. Je voulais juste partager mes expériences, au cas où cela aiderait quelqu'un.