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


126

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!


Je viens de visiter le site en utilisant Firefox et IE 10, ne voyez pas le problème. S'il est limité à Chrome, vous devrez peut-être attendre que Google le répare lui-même.
Nolonar

Je ne vois aucun flou ... je suis sur Chrome v25 / PC
vsync

J'ai également rencontré ce problème plus tôt, comme Nolonar l'a mentionné, nous devrons attendre que Google le répare.
raj_n

Ce n'est pas une solution, mais j'ai remarqué que le problème ne se produit pour moi que lorsque j'utilise CSS OptimizeLegibility.
Bangkokian le

Le lien est rompu.
Timothy003

Réponses:


78

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.


12
Ces techniques semblent toutes améliorer les choses, mais je n'arrive toujours pas à amener Chrome au même niveau de clarté que dans Firefox.
Michael Martin-Smucker

13
backface-visibility: hidden;a bien fonctionné dans mon cas, en résolvant un étrange mouvement flou causé par une transition d'opacité, c'est-à-dire. Le mouvement étrange a maintenant disparu, MAIS cela a rendu les textes de ma div définitivement flous à la place.
ITWitch

14
Comme @ykadaru l'a suggéré, essayez d'ajouter perspective(1px)à votre transform:code, cela a fonctionné pour moi dans Chrome alors que rien d'autre n'a résolu le problème
Serge Eremeev

4
Ne fonctionne pas sur Chrome Version 65.0.3325.162 (version officielle) (64 bits) fonctionnant sous Ubuntu 17.10 avec session Gnome X11 (Wayland désactivé)
Marecky

3
Dans Chrome 72, les deux premières options rendent le texte flou pendant et à la fin de la transformation
Brandito

24

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;

4
Pour moi, cela aggrave les choses.
balu

1
Pour moi, cela corrige le problème (sans cela, l'élément se déplace de 1px après la fin de l'animation, transformez: la perspective (1px) seule corrige cela!)
Sergiu

@balu vérifie ma réponse mise à jour! débarrassez-vous de la perspective(1px)propriété et voyez si cela fonctionne mieux.
ykadaru

16

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.


1
C'est la seule approche qui a fonctionné pour moi. Les autres approches (visibilité de la face arrière, ajout de filtres, perspective et bon vieux translateZ) n'ont fait qu'empirer les choses. Essayez de mettre à l'échelle des pixels entiers. Par exemple, passez de 14px à 16px en utilisant un facteur d'échelle de 1,1429 (16/14).
hugo der hungrige

1
A travaillé pour moi sans translateZ(0), changé juste 1.05pour1.048
A. Volg

15

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.


Pourquoi quelqu'un refuserait-il cela? Je ne comprends pas ... :( C'est un problème tout à fait valide dans certaines versions de chrome, et il semble que "va-changer" en général est encore assez nouveau et ne devrait probablement pas être utilisé. Pour plus d'informations, voir greensock .com / will-change
Dan

Eu le même problème. Merci d'avoir posté.
raine

J'ai eu le même problème avec le rendu des composants de conception de matériaux sur Chrome 75. La suppression du style css "will-changed" l'a corrigé.
Rob

Confirmé dans Chrome 79
Fareesh Vijayarangam

1
J'ai le contraire, en ajoutant will-change: transform;légèrement corrige le problème
Jakub Zawiślak

14

Au lieu de

transform: scale(1.5);

en utilisant

zoom : 150%;

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


Cela peut aider mais introduit également d'autres problèmes, comme des lignes de bordure blanches parfois introduites
Kevin

1
Je ne sais pas pourquoi le vote négatif. Quand j'ai appliqué cela aux cases à cocher, cela fonctionnait beaucoup mieux que transform: scale ()
Brian McCall

2
Pour Firefox, utilisez transform: scale () fonctionne comme un charme sans aucun flou. Vous devrez travailler sur la détection du navigateur et agir en conséquence pour Chrome / Safari et Firefox.
Naisheel Verdhan

15
Un autre problème est que le zoom ne semble pas fonctionner avec la propriété de transition, il ne peut donc pas être utilisé pour les animations CSS
ericgrosse

3
Cela fonctionne et renonce au flou, mais cela change également la position des éléments.
user1156544

8

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)

1
Avez-vous obtenu quelque chose avec votre rapport de bogue?
Diazole

peur que je ne me souvienne même pas où j'ai soumis le bogue. Je l'ai fait cependant.
andyw

J'utilise Bootstrap (4.4.1), Chrome (80.0.3987.132), Windows 10 (avec vue agrandie à 125%) et j'ai des textes flous dans le menu déroulant. Le menu est positionné en utilisant transform: translate3d();et cela semble causer le problème. Aucune des solutions suggérées n'a fonctionné pour moi. Sauf / un peu celui-ci. Cela ne fonctionne que si je le règle d'abord sur une valeur positive (par exemple blur(0.1px)), puis que je passe à blur(0px). Puisque l'élément est dynamique et nécessite également une solution dynamique (JS), ... cela craint: \
akinuri

7

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.


-webkit-filter: blur(0);seul fonctionne pour moi. backface-visibility: hidden;brouille mon élément lorsque je réinitialise la mise à l'échelle par la suite.
Kai Hartmann le

c'est assez drôle pour Chrome ... si je règle blur(0px); il ne le résout pas. mais si je le fais blur(1px);, puis appuyez sur la touche fléchée vers le bas pour blur(0px);que cela semble correct. Allé sur le rafraîchissement de la page / peu importe ce que j'écris dans le CSS
Tom Roggero

1
@TomRoggero Cela semble moins spécifique à la valeur de la propriété flou et plus à propos du moment où le redessiner de la mise en page est effectué. Vous pouvez essayer de forcer le rafraîchissement de l'élément à l'aide de JavaScript après un certain délai.
Gajus

5

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'étais en train de rencontrer exactement le même problème en faisant exactement la même chose. J'étais en train de centrer un modal avec translate3d (-50%, -50%, 0). Dans mon cas, j'ai augmenté les valeurs à -50,048% et cela a l'air parfait.
Chris Gutierrez


4

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

transform: scale(1.005);

à

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

3

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


Notez que ce zoomn'est défini par aucun standard Web et n'est pas pris en charge par firefox caniuse.com/#feat=css-zoom
Boltgolt

3

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

4
Pas de support Firefox pourzoom
Dustin Poissant

3

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.


3

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.


Un flou est attendu lors de l'utilisation de la traduction, car l'élément peut se retrouver sur un demi-pixel . Il existe de meilleures alternatives maintenant pour les choses de centrage: échantillon FlexBox , l' échantillon de grille
Timothy003

Le seul navigateur que j'ai testé qui semble avoir un problème avec le centre de transformation est Chrome, tout le reste semble limpide. J'ai regardé en arrière et ce problème existe depuis 7 ans! Il existe encore de nombreuses façons d'écorcher un chat et, comme vous le dites, ce n'est même plus nécessaire.
SJacks

c'est incroyable, mais filtre: flou (-0,1 px); m'a aidé !!. comment diable ça marche ??
jt3k

3

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

.element {
  display: table
}

2
fou mais ça marche; Chrome est apparemment le nouvel IE
Arthur le

oooow seigneur! ir fonctionne! Je suppose que la table 'fixe' de la largeur dans PX n'a ​​pas de largeur possible avec un demi-pixel ...
LuanLuanLuan

3

Ma solution était:

affichage: initial;

Puis c'était croustillant


2

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.


Cela fonctionne pour moi et il est également marqué comme inutilisé. J'ai également ajouté will-change: transform;qui corrige le flou des bordures des éléments. Aucune autre réponse n'a fonctionné pour moi.
Jakub Zawiślak

1

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)


L'ajout a perspective(1px)en fait aggravé les choses pour moi :(
balu

1

J'ai corrigé mon cas en ajoutant:

transform: perspective(-1px)

Ceci pour moi vient de supprimer le scale()résultat de la transformation
jpenna

1

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

1

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

1

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!


1

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


0

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.


0

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

le flou est parti!


0

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.


C'est ce qui m'est arrivé. Je ne peux pas me débarrasser de cet effet de flou. Une solution qui a fonctionné est de définir ces propriétés: top: 0, bottom: 0, left: 0; right: 0; margin: automais alors le conteneur prendra tout l'espace qu'il peut (il doit être de largeur), donc cela ne fonctionne pas au cas où le contenu devrait décider de la taille du conteneur.
kwiat1990

0

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

0

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.



-1

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;

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.