Comment empêcher le rendu du texte Webkit lors de la transition CSS
J'utilise des transitions CSS pour faire la transition entre des états transformés par CSS (essentiellement la transition d'échelle d'un élément). Je remarque que lorsque l'élément est en transition, le reste du texte de la page (dans Webkit) a tendance à légèrement modifier son rendu jusqu'à ce que la transition soit terminée.
Violon: http://jsfiddle.net/russelluresti/UeNFK/
J'ai aussi remarqué que cela ne se produit pas sur mes en-têtes, qui ont le -webkit-font-smoothing: antialiased paire propriété/valeur sur eux. Je me demande donc s'il est possible que le texte conserve son aspect par défaut (la valeur "auto" pour le lissage des polices) et ne modifie pas le rendu lors d'une transition.
J'ai essayé explicitement de définir le texte pour utiliser la valeur "auto", mais cela ne fait rien. Je dois également noter que le fait de régler le lissage des polices sur "aucune" empêche également le rendu de clignoter pendant la transition.
Toute aide est appréciée.
Éditer 1
Je dois noter que je suis sous OS X. Lors de l'examen de mon test dans Chrome sur Parallels, je n'ai pas vu les deux paragraphes se comporter différemment, ce problème peut donc être 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 indiqué, ce hack désactive le lissage des polices et peut dégrader le rendu du texte en fonction de vos polices, 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 beaucoup, MAIS SEULEMENT SUR RETINA. Sans cela, dans Safari sur les écrans de rétine, le texte est mince et insipide, alors que le texte a le poids qui convient, mais si vous l'utilisez sur des affichages autres que ceux de la rétine dans Safari (en particulier pour les valeurs de poids faible), le texte est un sinistre. Nous vous recommandons vivement d'utiliser une requête de média:
@media screen and (-webkit-min-device-pixel-ratio: 2) { body { -webkit-font-smoothing: subpixel-antialiased; } }
Définir explicitement -webkit-font-smoothing: subpixel-antialiased Est la meilleure solution actuelle si vous souhaitez au moins éviter partiellement le texte anticrénelé plus fin.
--tl; dr--
Avec Safari et Chrome où le rendu de police par défaut utilise un anti-crénelage de sous-pixels, tout code CSS qui force le rendu basé sur un GPU, comme les suggestions ci-dessus, à utiliser une transformation à l'aide de translateZ ou même simplement une transition d'échelle, obliger Safari et Chrome à "abandonner" automatiquement le lissage des polices sous-pixel et à l'anti-aliasing et à passer à un texte anti-aliasé, qui est beaucoup plus clair et plus fin, en particulier sur Safari.
D'autres réponses ont mis l'accent sur le maintien d'un rendu constant en définissant ou en forçant simplement le lissage des polices au texte anticrénelé plus fin. À mes yeux, l’utilisation de translateZ ou de la face arrière masquée dégrade considérablement la qualité du rendu du texte. La meilleure solution si vous voulez que le texte reste cohérent et que le texte plus fin vous convient est d’utiliser -webkit-font-smoothing: antialiased. Cependant, définir explicitement -webkit-font-smoothing: subpixel-antialiased A effectivement un effet - le texte change toujours légèrement et est visiblement plus mince lors des transitions rendues sur le GPU, mais pas aussi fin qu'il le serait sans ce paramètre. On dirait donc que cela empêche au moins partiellement le passage au texte simple anti-aliasé.
J'ai remarqué cela à peu près à chaque fois que je rencontrais des problèmes graphiques (scintillement/bégaiement/agitation/etc.) en raison d'une transition, en utilisant -webkit-backface-visibilité: hidden; sur les éléments qui agissent tend à résoudre le problème.
Pour empêcher les modifications de rendu du texte dues à une accélération matérielle, vous pouvez:
Définissez tout le texte sur -webkit-font-smoothing: antialiasé. Cela signifie que le texte est plus fin et non antialiasé.
Si vous souhaitez que le texte affecté par l'accélération matérielle soit anti-aliasé de sous-pixel (type de lissage de police par défaut), le fait de l'insérer dans une entrée, sans bordure et sans le désactiver, conservera ce sous-pixel anti-alias (au moins on Chrome sur 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 voudrez utiliser les fichiers CSS suivants pour résoudre le problème.
-moz-osx-font-smoothing: grayscale;
Plus à ce sujet sur Webfont Smoothing and Antialiasing dans Firefox et Opera
C'est ce qui a fonctionné pour moi. J'espère que ça aide. Trouvé dans un autre poste de stackoverflow.
-webkit-font-smoothing:antialiased;
-webkit-backface-visibility:hidden;
En plus des solutions ci-dessus (-webkit-transform: translateZ(0px) sur l'élément et -webkit-font-smoothing: antialiased sur la page), certains éléments peuvent encore se comporter mal. Pour moi, il s’agissait d’un texte fictif dans un élément d’entrée: pour cela, utilisez position:relative
Pour empêcher le changement de rendu, vous devez définir font-smoothing: antialiased (ou none).
La désactivation du rendu des polices sous-pixel par le navigateur est probablement un effet secondaire de l'accélération matérielle. Lorsque l'arrière-plan sur lequel vous effectuez le rendu change constamment, le texte ne peut pas être rendu sur un calque séparé, car chaque image doit être comparée à tous les calques d'arrière-plan. Cela pourrait dégrader gravement les performances.
Apple désactive souvent le lissage des polices de sous-pixels sur les sites leurspropres .