Comment empêcher le changement de rendu de texte Webkit pendant la transition CSS

J’utilise les transitions CSS pour faire la transition entre les états transformés CSS (en passant essentiellement à l’échelle d’un élément). Je remarque que lorsque l’élément est en transition, le rest du texte sur la page (dans Webkit) a tendance à modifier légèrement son rendu jusqu’à la fin de la transition.

Violon: http://jsfiddle.net/russelluresti/UeNFK/

J’ai également remarqué que cela ne se produit pas sur mes en-têtes, qui ont la paire propriété / valeur -webkit-font-smoothing: antialiased . Je me demande donc s’il existe un moyen de conserver l’apparence par défaut du texte (la valeur “auto” pour le lissage des fonts) et de ne pas modifier le rendu lors d’une transition.

J’ai essayé de définir explicitement le texte pour utiliser la valeur “auto”, mais cela ne fait rien. Je devrais également noter que le fait de définir le lissage de police sur «aucun» empêche également le clignotement du rendu pendant la transition.

Toute aide est appréciée.

Modifier 1

Je devrais noter que je suis sur OS X. En regardant mon test dans Chrome sur Parallels, je n’ai pas vu les deux paragraphes différents se comporter différemment, donc cela peut être un problème exclusif aux Mac.

Je pense avoir trouvé une solution:

 -webkit-transform: translateZ(0px); 

Forcer l’accélération matérielle sur l’élément parent semble résoudre le problème …

EDIT Comme commenté, ce hack désactive le lissage des fonts et peut dégrader le rendu du texte en fonction de vos fonts, de votre navigateur et de votre système d’exploitation!

MISE À JOUR mai 2018

-webkit-font-smoothing: subpixel-antialiased n’a plus d’effet dans Chrome, mais dans Safari, il améliore encore les choses, MAIS UNIQUEMENT SUR RETINA. Sans elle, Safari sur les écrans de rétine est mince et insipide, alors que le texte a le poids approprié. Mais si vous utilisez ceci sur des affichages non rétiniens dans Safari (en particulier à des valeurs légères), le texte est un désastre. Recommande fortement d’utiliser une requête média:

@media screen and (-webkit-min-device-pixel-ratio: 2) { body { -webkit-font-smoothing: subpixel-antialiased; } }


-webkit-font-smoothing: subpixel-antialiased explicitement -webkit-font-smoothing: subpixel-antialiased est la meilleure solution actuelle si vous souhaitez éviter au moins partiellement le texte plus léger anti-crénelé.

–tl; dr–

Avec Safari et Chrome, où le rendu de police par défaut utilise un anti-aliasing de sous-pixels, tout CSS qui oblige le rendu basé sur le GPU, comme les suggestions ci-dessus pour utiliser Transform ou même une transition d’échelle, “sur le lissage des fonts avec sous-pixels et antialiaser, mais plutôt du texte anti-aliasé, qui paraît beaucoup plus léger et léger, en particulier sur Safari.

D’autres réponses ont porté sur le maintien d’un rendu constant en définissant ou en forçant simplement le lissage de la police sur le texte anti-escroc le plus mince. À mes yeux, l’utilisation de translateZ ou backface hidden dégrade de manière significative la qualité du rendu du texte et la meilleure solution si vous voulez que le texte rest cohérent et que vous êtes d’accord avec le texte le plus fin, est d’utiliser -webkit-font-smoothing: antialiased . Cependant, définir explicitement -webkit-font-smoothing: subpixel-antialiased effectivement un effet – le texte change encore légèrement et est visiblement plus mince lors des transitions rendues sur le GPU mais pas aussi mince que sans ce paramètre. Il semble donc que cela empêche au moins partiellement le passage à un texte anti-rectification direct.

Je l’ai remarqué à peu près chaque fois que j’ai des problèmes graphiques (scintillement / bégaiement / agitation / etc) dus à une transition, en utilisant -webkit-backface-visibility: hidden; sur les éléments qui agissent a tendance à résoudre le problème.

Pour empêcher les modifications de rendu du texte dues à l’accélération matérielle, vous pouvez soit:

  1. Définissez tout le texte sur -webkit-font-smoothing: antialias. Cela signifie que le texte est plus fin et ne contient pas d’anticrénelage sous-pixel.

  2. Si vous voulez que le texte affecté par l’accélération matérielle soit un antialiasé de sous-pixel (le type de lissage par défaut), alors placer ce texte dans une entrée, sans bordures et désactivé, conservera ce sous-aliasing (au moins sur Chrome sous Mac OS X). Je n’ai pas testé cela sur d’autres plates-formes, mais si l’antialiasing sous-pixel est important, vous pouvez au moins utiliser cette astuce.

Si vous utilisez Firefox sur un Mac, vous devrez utiliser le css suivant pour résoudre le problème.

 -moz-osx-font-smoothing: grayscale; 

En savoir plus sur le lissage et l’anticrénelage de Webfont dans Firefox et Opera

C’est ce qui a fonctionné pour moi. J’espère que cela aide. Trouvé dans un autre post stackoverflow.

 -webkit-font-smoothing:antialiased; -webkit-backface-visibility:hidden; 

Pour empêcher le changement de rendu, vous devez définir le font-smoothing: antialiased (ou none ).

Le navigateur désactivant le rendu des fonts de sous-pixels est probablement un effet secondaire de l’accélération matérielle. Lorsque l’arrière-plan sur lequel vous effectuez un rendu change constamment, le texte ne peut pas être rendu sur un calque distinct, car chaque image doit être vérifiée par rapport à tous les calques d’arrière-plan. Cela pourrait gravement dégrader les performances.

Apple désactive souvent le lissage des fonts de sous-pixels sur leurs propres sites.

Outre les solutions ci-dessus ( -webkit-transform: translateZ(0px) sur l’élément et -webkit-font-smoothing: antialiased sur la page), certains éléments peuvent toujours se comporter de manière incorrecte. Pour moi, il s’agissait d’un texte d’espace réservé dans un élément d’entrée: pour cela, utilisez la position:relative

J’ai eu le même problème. Lisez-le attentivement:

Je remarque que lorsque l’élément est en transition, le rest du texte sur la page (dans Webkit) a tendance à modifier légèrement son rendu jusqu’à la fin de la transition.

aucune des solutions ci-dessus ne semble fonctionner. Cependant, réglage (choses comme)

 #myanimation { -webkit-transform: translateZ(0px); } 

sur l’élément qui a l’animation a fonctionné.

En prenant l’élément animé sur la couche GPU, vous le retirez du stream normal du rendu de la page (des choses comme z-index ne fonctionneront plus, par exemple). Comme effet secondaire, l’animation et le rest de la page ne s’influencent plus.

Si cela affecte le rendu de vos fonts, cela ne concerne que l’élément animé, ofcourse. Je ne vois pas la différence dans mon Chrome.