Texte flou après avoir utilisé CSS transform: scale (); dans Chrome

j'ai eu ce problème un certain nombre de fois et il semble y avoir 2 façons de le fixer (voir ci-dessous). Vous pouvez utiliser l'une de ces propriétés pour résoudre le rendu, ou les deux en même temps.

Backface visibilité caché résout le problème car il simplifie l'animation juste à l'avant de l'objet, alors que l'état par défaut est l'avant et l'arrière.

backface-visibility: hidden;

TranslateZ fonctionne aussi comme il est un hack pour ajouter l'accélération matérielle pour l'animation.

transform: translateZ(0);

ces Deux propriétés résoudre le problème que vous rencontrez, mais certaines personnes aiment aussi ajouter

-webkit-font-smoothing: subpixel-antialiased;

à leur objet animé. Je trouve qu'il peut modifier le rendu d'une police web mais n'hésitez pas à essayer cette méthode de trop.

au lieu de

transform: scale(1.5);

utilisant

zoom : 150%;

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

j'ai trouvé que l'ajustement du ratio d'échelle a aidé légèrement.

utilisant scale(1.048) sur (1.05) semble générer une meilleure approximation de la taille de police d'un pixel entier, réduisant le flou sous-pixel.

j'ai aussi utilisé translateZ(0) qui semble ajuster la dernière étape D'arrondi de Chrome dans l'animation transform. C'est un plus pour mon usage onhover car il augmente la vitesse et réduit le bruit visuel. Pour une fonction onclick cependant, I Je ne l'utiliserais pas parce que la police transformée ne semble pas être aussi croustillante.

les Sunderls me conduisent à la réponse. Sauf que filter: scale n'existe pas, mais filter: blur existe.

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

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

Il presque a parfaitement fonctionné. " presque " parce que j'utilise une transition et pendant la transition, les éléments ne semblent pas parfaits, mais une fois la transition est fait, ils le font.

afin D'améliorer l'effet de flou, de l'esp. sur Chrome, essayez de faire ceci:

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

il doit s'agir d'un bug avec Chrome (Version 56.0.2924.87), mais ce qui suit corrige le flou pour moi lors de la modification des propriétés css dans la console('.0'). Je vais le signaler.

filter: blur(.0px)

essayez d'utiliser zoom: 101%; pour les conceptions complexes lorsque vous ne pouvez pas utiliser une combinaison de zoom + échelle.

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

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

et juste en ajoutant la propriété zoom l'a réparé pour moi. Jouer avec zoom, suivant travaillé pour moi:

zoom: 97%;   

j'ai découvert que le problème se passe sur les transformations relatives quelque sorte. translateX(50%), l'échelle(1.1) ou ce que jamais. fournir des valeurs absolues fonctionne toujours (ne produit pas de texte flou(ures)).

aucune des solutions mentionnées ici n'a fonctionné, et je pense qu'il n'y a pas encore de solution (en utilisant Chrome 62.0.3202.94 pendant que j'écris ceci).

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

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

NOTE

je suis tout à fait sûr, que ces valeurs varient sur différentes tailles d'écran. Je voulais juste partager mes expériences, au cas où ça aiderait quelqu'un.

pour moi, le problème était que mes éléments utilisaient transformStyle: preserve-3d . J'ai réalisé que ce n'était pas vraiment nécessaire pour l'application et l'enlever a corrigé le flou.

rien de ce qui précède n'a fonctionné pour moi. J'avais cette animation pour 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 effet flou a disparu après l'application de cette règle: -webkit-perspective: 1000; même s'il est marqué comme utilisé dans Chrome inspecteur.

j'ai trouvé une solution beaucoup mieux et propre:

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

ou

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

merci à ce post: prévention de la formation de flous avec transform: échelle

rien de ce qui précède n'a fonctionné pour moi.

ça a marché quand j'ai ajouté perspective

c'est à dire de

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

j'ai changé en

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

j'ai corrigé mon cas en ajoutant:

transform: perspective(-1px)

le texte ne sera pas flou si vous ne le faites pas transition le transform .

faites Simplement ceci:

&:hover {
    transform: scale(1.1);
}

sans la transition comme transition: all .2s;

il est important d'ajouter que cette question se pose si l'élément qui est traduit a une hauteur avec un nombre impair de pixels. Ainsi, si vous avez le contrôle sur la hauteur de l'élément, le paramétrer à un nombre pair fera apparaître le Contenu net

vous pouvez utiliser css filter pour corriger cela.

.element {
    filter: blur(0);
}

à propos de vendor-prefix, s'il vous plaît le faire par vous-même. -webkit-filter , -ms-filter . le détail est ici http://browser.colla.me/show/css_transformation_scale_cause_blurring