Comment prévenir Webkit rendu de texte à modifier au cours de transition CSS
Je suis en utilisant les transitions CSS pour la transition entre le CSS transformé les états (essentiellement la transition à l'échelle d'un élément). J'ai remarqué que lorsque l'élément est en phase de transition, le reste du texte sur la page (dans Webkit) tend à modifier légèrement son rendu jusqu'à ce que la transition se fait.
Violon: http://jsfiddle.net/russelluresti/UeNFK/
J'ai aussi remarqué que cela ne se produit pas sur mes en-têtes, qui ont la -webkit-font-smoothing: antialiased paire propriété/valeur sur eux. Donc, je me demandais, est-il possible d'avoir le texte de maintenir son apparence par défaut (la valeur "auto" pour la police de lissage) et ne pas altérer le rendu pendant une période de transition.
J'ai essayé de définir explicitement le texte à utiliser la valeur "auto", mais qui ne fait rien. Je tiens également à noter que le réglage de la police de lissage à "none" empêche également le rendu de clignoter pendant la période de transition.
Toute aide est appréciée.
Edit 1
Je dois souligner que je suis sur OS X. en regardant mes test en Chrome sur Parallels, je n'ai pas vu les deux paragraphes à se comporter différemment, donc cela peut être un problème exclusif pour Mac.
- 21. Et le Safari version 6. Il arrive dans les deux navigateurs, qui me fait penser que c'est Webkit, et non le navigateur.
- les deux lissé et alias paragraphes présentant le même comportement. la Version chrome 23.0.1270.0 canaries | 21.0.1180.89 m | 5.17 safari
- Je devine que vous êtes sur le dev version de Chrome. Cependant, l'OS peut jouer un rôle dans tout cela. Je vais modifier la question à noter que j'utilise OSX.
- Je n'ai absolument aucune idée de pourquoi cela fonctionne, mais en ajoutant '-webkit-transform: translateZ(0);' pour '.l'anticrénelage {} semble pour le fixer. Il fonctionne même si vous l'ajoutez à 'p {}'. Puisque je ne peux pas expliquer pourquoi cela fonctionne il ne se sent pas le droit de lui fournir une réponse. Espérons que ça aide!
- Qui les rend compatibles, mais qui rend le tout semble lissé (ils sont tous plus mince de texte). Je suis en train de faire de l'onu-texte crénelage (le premier paragraphe) restent dans le style par défaut (qui est d'apparence un peu plus audacieux que le texte crénelage).
- N'hésitez pas à accepter toute réponse 🙂
- Ce fait semble avoir été corrigé dans la version mise à jour de Chrome. Google Chrome ne clignote plus, le non-texte anti-aliasé.
- Je trouve que sa passe sur Windows navigateurs trop donc je ne pense pas que c'est un problème de Mac. Pour moi l'unique option est maintenant le translateZ(0).
- Salut! Soins à accepter mon answser (ou quelqu'un d'autre)? Cheers!
- Personne ne sais si cette question a un bug dans Google tracker?
Vous devez vous connecter pour publier un commentaire.
Je crois que j'ai trouvé Une solution:
Forcer l'accélération matérielle sur l'élément parent semble résoudre le problème...
MODIFIER
Comme indiqué, ce hack désactive la police de lissage et peut dégrader le rendu du texte en fonction de vos polices de caractères, de navigateur et de système d'exploitation!
Mise à JOUR Mai 2018
-webkit-font-smoothing: subpixel-antialiased, n'a pas d'effet dans Chrome, mais dans Safari, il améliore encore les choses beaucoup MAIS SEULEMENT SUR la RÉTINE. Sans elle dans Safari sur la rétine des écrans de texte est mince et insipide, alors qu'avec elle, le texte a le bon poids. Mais si vous utilisez cette non sur les écrans de la rétine dans Safari, (surtout à la lumière de valeurs de poids) le texte est une catastrophe. Vous recommandons vivement d'utiliser un media-query :@media screen and (-webkit-min-device-pixel-ratio: 2) {
body {
-webkit-font-smoothing: subpixel-antialiased;
}
}
La définition explicite de
-webkit-font-smoothing: subpixel-antialiasedest la meilleure solution si vous voulez, au moins partiellement, d'éviter le diluant texte crénelage.--tl;dr--
À la fois avec Safari et Chrome où la police par défaut de rendu utilise des sous-pixel-antialiasing, CSS que les forces du GPU en fonction de rendu, comme les suggestions ci-dessus à l'utilisation d'une transformation à l'aide de translateZ ou même juste une échelle de transition, seront la cause de Safari et de Chrome automatiquement "renoncer" à sous-pixel-crénelage de lissage des polices et, au lieu de passer à juste lissé texte, qui semble beaucoup plus léger et plus mince, en particulier sur Safari.
D'autres réponses ont mis l'accent sur le maintien d'une constante rendu par simple réglage ou en forçant la police de lissage à la plus mince antiailiased texte. À mes yeux à l'aide de translateZ ou le backface caché dégrade la qualité du rendu du texte et de la meilleure solution si vous souhaitez que le texte juste rester cohérent et que vous êtes OK avec le diluant texte est juste pour utiliser
-webkit-font-smoothing: antialiased. Cependant, la définition explicite de-webkit-font-smoothing: subpixel-antialiasedn'effectivement avoir un certain effet le texte n'a encore changer légèrement et est à peu près visiblement plus mince pendant les transitions rendu sur le GPU, mais pas aussi mince que il va sans ce paramètre. De sorte qu'il ressemble à cela, au moins partiellement, empêche le commutateur à droite antiailiased texte.J'ai remarqué que presque à chaque fois, je vais avoir des problèmes graphiques (scintillement/bégaiement/images saccadées/etc) en raison d'une transition, l'aide -webkit-backface-visibility: hidden; sur les éléments qui sont les siennes tend à résoudre le problème.
Pour empêcher que le texte rendu changements dus à l'accélération matérielle, vous pouvez soit:
Ensemble tous les textes à -webkit-font-smoothing: antialiased. Cela signifie que le texte est plus mince et pas de sous-pixel de l'anticrénelage.
Si vous voulez que le texte qui en est affectée par l'accélération matérielle sous-pixel de l'anticrénelage (la valeur par défaut type de lissage des polices), puis à la mettre que du texte à l'intérieur de l'entrée, sans frontières et les personnes handicapées, va garder ce sous-pixel de l'anticrénelage (au moins sur google Chrome sur Mac OS X). Je n'ai pas testé sur d'autres plates-formes, mais en cas de sous-pixel de l'anticrénelage est important, vous pouvez au moins utiliser cette astuce.
Si vous utilisez Firefox sur un Mac, vous aurez envie d'utiliser le css suivant pour résoudre le problème.
Plus sur ce à Webfont Lissage et l'Antialiasing dans Firefox et Opera
C'est ce qui a fonctionné pour moi. Espérons que cela aide. Trouvé dans d'autres stackoverflow post.
Pour empêcher le rendu changement, vous devez définir le
font-smoothing: antialiased(ounone).Le navigateur désactivation des sous-pixel de rendu des polices est probablement un des effets secondaires de l'accélération matérielle. Lorsque l'arrière-plan, vous êtes rendu à l'encontre de change constamment, le texte ne peut pas être rendue sur un calque distinct, que chaque image doit être vérifié toutes les couches de fond. Cela pourrait gravement nuire aux performances.
Apple souvent de désactiver les sous-font-smoothing sur leur propre sites.
Outre les solutions ci-dessus (
-webkit-transform: translateZ(0px)sur l'élément, et-webkit-font-smoothing: antialiasedsur la page) certains éléments peuvent encore se comportent mal. Pour moi, c'était un espace réservé de texte dans un élément d'entrée: Pour cela, utilisezposition:relativeJ'ai eu le même problème. Lire attentivement:
aucune des solutions ci-dessus semblait fonctionner. Toutefois, le paramètre (comme)
sur l'élément que a l'animation a fait un travail.
En prenant l'animation élément de la GPU de la couche que vous sortez de l'écoulement normal du rendu de la page (des choses comme le z-index ne fonctionne plus trop, par exemple). En effet, l'animation et le reste de la page habitude influence eachother plus.
Si il les effets de votre rendu des polices, il ne le fait que pour l'animation de l'élément, bien sûr. Je ne vois pas la différence dans mon Chrome.
-webkit-transformsur le élément qui a de l'animation, pour éviter de rendu des modifications sur d'autres éléments de la page. mais comme le faisait remarquer, il a travaillé pendant un certain temps et a cessé de travailler quand j'ai changé de bits de la page plus tard.