Texte flou après utilisation de la transformation CSS: scale (); dans Chrome

On dirait qu'il y a eu une mise à jour récente de Google Chrome qui provoque un texte flou après avoir fait un transform: scale(). Plus précisément, je fais ceci:

@-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 dans la zone de texte principale. Il n'a pas l'habitude de faire cela et il ne semble pas affecter les autres navigateurs Webkit (comme Safari). Il y avait d'autres articles sur des personnes rencontrant un problème similaire avec les transformations 3D, mais je ne trouve rien sur les transformations 2D comme celle-ci.

Toutes les idées seraient appréciées, merci!

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

La visibilité cachée de la face arrière résout le problème car elle simplifie l'animation à l'avant de l'objet, alors que l'état par défaut est l'avant et l'arrière.

backface-visibility: hidden;

TranslateZ fonctionne également car il s'agit d'un hack pour ajouter une accélération matérielle à l'animation.

transform: translateZ(0);

Ces deux propriétés résolvent le problème que vous rencontrez, mais certaines personnes aiment également ajouter

-webkit-font-smoothing: subpixel-antialiased;

à leur animés pour objecter. Je trouve que cela peut changer le rendu d'une police Web, mais n'hésitez pas à expérimenter cette méthode également.

Pour améliorer le flou, esp. sur Chrome, essayez de faire ceci:

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

MISE À JOUR: La perspective ajoute une distance entre l'utilisateur et le plan z, qui met techniquement à l'échelle l'objet, ce qui donne l'impression que le flou est «permanent». Ce qui perspective(1px)précède est comme du ruban adhésif parce que nous correspondons au flou que nous essayons de résoudre. Vous pourriez avoir plus de chance avec le css ci-dessous:

transform: translateZ(0);
backface-visibility: hidden;

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

L'utilisation de scale(1.048)over (1.05)semblait générer une meilleure approximation d'une taille de police de pixels entiers, réduisant le flou sous-pixel.

J'ai également utilisé translateZ(0)ce qui semble ajuster la dernière étape d'arrondi de Chrome dans l'animation de transformation. C'est un plus pour mon utilisation en vol stationnaire car cela augmente la vitesse et réduit le bruit visuel. Cependant, pour une fonction onclick, je ne l'utiliserais pas car la police transformée ne semble pas aussi croustillante.

Après avoir essayé tout le reste ici sans chance, ce qui a finalement résolu ce problème pour moi a été de supprimer la will-change: transform;propriété. Pour une raison quelconque, cela a provoqué une mise à l'échelle terriblement floue dans Chrome, mais pas dans Firefox.

Au lieu de

transform: scale(1.5);

en utilisant

zoom : 150%;

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

Cela doit être un bogue 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)

Les Sunderls m'amènent à la réponse. Sauf filter: scalen'existe pas, maisfilter: blur .

Appliquez 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);

Cela a presque 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 terminée, ils le font.

J'ai découvert que le problème survient de quelque manière que ce soit sur les transformations relatives. translateX (50%), scale (1.1) ou quoi que ce soit. 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 une boîte de dialogue).

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

REMARQUE

Je suis tout à fait sûr que ces valeurs varient selon les tailles d'écran. Je voulais juste partager mes expériences, au cas où cela aiderait quelqu'un.

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

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

ou

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

Grâce à cet article: Empêcher le rendu flou avec transform: scale

L'ajout a perspective(1px)fonctionné pour moi.

transform: scale(1.005);

à

transform: scale(1.005) perspective(1px);

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

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

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

et l'ajout de la propriété de zoom l'a corrigé pour moi. Jouez avec le zoom, le suivi a fonctionné pour moi:

zoom: 97%;   

Une autre solution à essayer que je viens de trouver pour les transformations floues (translate3d, scaleX) sur Chrome consiste à définir l'élément comme " display: inline-table ;". Il semble forcer l'arrondi des pixels dans certains cas (sur l'axe X).

J'ai lu que le positionnement des sous-pixels sous Chrome était prévu et les développeurs ne le répareront pas.

Mise à jour 2019
Le bogue d'affichage de Chrome n'est toujours pas résolu et, bien que ce ne soit pas la faute des clients, aucune des suggestions proposées dans l'intégralité de ce site Web n'aide à résoudre le problème. Je peux convenir que j'ai essayé chacun d'entre eux en vain: un seul se rapproche et c'est la règle css: filter: blur (0); qui élimine le décalage d'un conteneur de 1px mais ne résout pas le bogue d'affichage flou du conteneur lui-même et de tout contenu qu'il peut avoir.

Voici la réalité: il n'y a littéralement pas de solution à ce problème, voici donc une solution pour les sites Web fluides

CAS
Je développe actuellement un site Web fluide et j'ai 3 divs, tous centrés avec des effets de survol et partageant des valeurs de pourcentage à la fois en largeur et en position. Le bug Chrome se produit sur le conteneur central qui est réglé à gauche: 50%; et transformer: translateX (-50%); un cadre commun.

EXEMPLE: D'abord le HTML ...

<div id="box1" class="box">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry"s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>

<div id="box2" class="box">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry"s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>

<div id="box3" class="box">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry"s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>

Voici le CSS où se produit le bogue Chrome ...

*{margin:0; padding:0; border:0; outline:0; box-sizing:border-box;  background:#505050;}
.box {position:absolute; border:1px solid #fff; border-radius:10px; width:26%; background:#8e1515; padding:25px; top:20px; font-size:12pt; color:#fff; overflow:hidden; text-align:center; transition:0.5s ease-in-out;}
.box:hover {background:#191616;}
.box:active {background:#191616;}
.box:focus {background:#191616;}
#box1 {left:5%;}
#box2 {left:50%; transform:translateX(-50%);} /* Bugged */
#box3 {right:5%;}

Voici le CSS corrigé ...

*{margin:0; padding:0; border:0; outline:0; box-sizing:border-box;  background:#505050;}
.box {position:absolute; border:1px solid #fff; border-radius:10px; width:26%; background:#8e1515; padding:25px; top:20px; font-size:12pt; color:#fff; overflow:hidden; text-align:center; transition:0.5s ease-in-out;}
.box:hover {background:#191616;}
.box:active {background:#191616;}
.box:focus {background:#191616;}
#box1 {left:5%;}
#box2 {left:37%;} /* Fixed */
#box3 {right:5%;}

Violon buggé: https://jsfiddle.net/m9bgrunx/2/
violon fixe: https://jsfiddle.net/uoc6e2dm/2/

Comme vous pouvez le voir, une petite quantité de modifications apportées au CSS devrait réduire ou éliminer la nécessité d'utiliser la transformation pour le positionnement. Cela pourrait également s'appliquer aux sites Web à largeur fixe ainsi qu'aux fluides.

J'ai le même problème. J'ai corrigé cela en utilisant:

.element {
  display: table
}

Ma solution était:

affichage: initial;

Puis c'était croustillant

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

Aucune de ces réponses n'a fonctionné pour moi.

Cela a fonctionné quand j'ai ajouté de la perspective

ie 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)

J'ai corrigé mon cas en ajoutant:

transform: perspective(-1px)

POUR CHORME:

J'ai essayé toutes les suggestions ici. Mais n'a pas fonctionné. Mon collège a trouvé une excellente solution, qui fonctionne mieux:

Vous ne devez PAS passer au-delà de 1,0

Et incluez translateZ(0)dans le survol mais PAS dans la position sans survol / initiale.

Exemple:

a {
    transition: all 500ms cubic-bezier(0.165, 0.840, 0.440, 1.000);
    transform: scale(0.8, 0.8);
}

a:hover {
    transform: translateZ(0)scale(1.0, 1.0);
}

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;
}

J'étais confronté au problème de texte flou sur Chrome mais pas sur Firefox lorsque j'ai utilisé 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 de ceux-ci 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 !!!

Remarque: cela peut dépendre d'un cas d'utilisation à l'autre. Mais ça vaut vraiment le coup d'essayer!

J'ai essayé beaucoup d'exemples de ces réponses, malheureusement, rien n'aide pour Chrome, Version 81.0.4044.138 j'ai ajouté à la place l'élément de transformation

 transform-origin: 50% 50%;

celui-là

 transform-origin: 51% 51%;

ça m'aide

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 sa suppression a corrigé le flou.

J'ai supprimé ceci de mon code - transform-style: preserve-3d; et ajouté ceci -transform: perspective(1px) translateZ(0);

le flou est parti!

Dans Chrome 74.0.3729.169, actuel à partir du 25/05/19, il ne semble pas y avoir de correctif pour le flou se produisant à certains niveaux de zoom du navigateur causés par la transformation. Même un simple TransformY(50px)brouillera l'élément. Cela ne se produit pas dans les versions actuelles de Firefox, Edge ou Safari, et cela ne semble pas se produire à tous les niveaux de zoom.

Ce sera difficile à résoudre avec seulement css.

Alors je l'ai résolu avec jquery.

Ceci est mon CSS.

.trY {
   top: 50%;
   transform: translateY(-50%);
}

.trX {
   left: 50%;
   transform: translateX(-50%);
}

.trXY {
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}

et ceci est ma jquery.

function tr_init() {
$(".trY, .trX, .trXY").each(function () {
    if ($(this).outerWidth() % 2 != 0) {
        var fixed_width = Math.ceil($(this).outerWidth() / 2) * 2;
        $(this).css("width", fixed_width);
    }
    if ($(this).outerHeight() % 2 != 0) {
        var fixed_height = Math.ceil($(this).outerHeight() / 2) * 2;
        $(this).css("height", fixed_height);
    }
})}

Juste pour ajouter à l'engouement pour les correctifs, mettre {border: 1px solid # ???} autour de l'objet qui semble mal corrige le problème pour moi. Si vous avez une couleur d'arrière-plan stable, tenez-en compte également. C'est tellement stupide que personne n'a pensé à le mentionner, je suppose, eh eh.

vous pouvez utiliser css filterpour résoudre ce problème.

.element {
    filter: blur(0);
}

à propos du 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

Le texte ne sera pas flou si vous ne transitionle faites pas transform.

Faites juste ceci:

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

Sans la transition comme transition: all .2s;