So verhindern Sie, dass sich das Rendern von Webkit-Text während des CSS-Übergangs ändert

Ich verwende CSS-Übergänge, um zwischen CSS-transformierten Zuständen zu wechseln (im Grunde genommen wird die Skalierung eines Elements geändert). Ich stelle fest, dass der Rest des Textes auf der Seite (in Webkit) beim Übergang des Elements dazu neigt, das Rendering geringfügig zu ändern, bis der Übergang abgeschlossen ist.

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

Ich habe auch festgestellt, dass dies bei meinen Headern nicht auftritt, auf denen sich das -webkit-font-smoothing: antialiasedEigenschafts- / Wertepaar befindet. Ich frage mich also, ob es eine Möglichkeit gibt, den Text in seinem Standard-Look (dem "Auto" -Wert für die Schriftglättung) beizubehalten und das Rendern während eines Übergangs nicht zu ändern.

Ich habe versucht, den Text explizit so einzustellen, dass er den Wert "auto" verwendet, aber das macht nichts. Ich sollte auch beachten, dass das Setzen der Schriftglättung auf "keine" auch das Blinken des Renderings während des Übergangs verhindert.

Jede Hilfe wird geschätzt.

Bearbeiten 1

Ich sollte beachten, dass ich unter OS X bin. Bei meinem Test in Chrome auf Parallels habe ich nicht festgestellt, dass sich die beiden unterschiedlichen Absätze unterschiedlich verhalten. Dies ist möglicherweise ein Problem, das nur Macs vorbehalten ist.

Ich glaube, ich habe eine Lösung gefunden:

-webkit-transform: translateZ(0px);

Das Erzwingen der Hardwarebeschleunigung für das übergeordnete Element scheint das Problem zu lösen ...

BEARBEITEN Wie kommentiert, deaktiviert dieser Hack die Schriftglättung und kann die Textwiedergabe abhängig von Ihren Schriftarten, Ihrem Browser und Ihrem Betriebssystem beeinträchtigen!

UPDATE August 2020

Sie müssen Safari nicht mehr mit einer Medienabfrage ansprechen, um die Glättung von Subpixel-Schriftarten zu aktivieren. Der Standardwert ist in Ordnung.

Jedoch , obwohl es Subpixel - Schriftglättung standardmäßig verwendet, gibt es eine signifikante Fliege in der Salbe in Chrome Schriftglättung, für alle , die eine Suche konsistenten Darstellung von Text .

1. Dies ist Chrome's Rendering von hellem Text auf dunklem Hintergrund
2. Dies ist Chrome's Rendering von dunklem Text auf hellem Hintergrund

Schauen Sie sich die Größe des Ganzen im obigen Buchstaben e an. Der helle Text auf dunklem Hintergrund wird mit einer spürbar höheren Gewichtung gerendert als der dunkle Text auf hellem Hintergrund (mit identischem CSS-Schriftstil).

Eine Lösung für Websites, die die Dunkel / Hell-Themeneinstellung des Benutzers berücksichtigen, besteht darin, Chrome mit einer Medienabfrage anzusprechen, die auf den Dunkelmodus beschränkt ist, und diese wie folgt auf Nicht-Subpixel-Glättung umzustellen:

@media screen
and (-webkit-min-device-pixel-ratio: 0)
and (min-resolution: 0.001dpcm)
and (prefers-color-scheme: dark) {
  body {
    -webkit-font-smoothing: antialiased;
  }
}

Das Ergebnis :

Eine weitaus gleichmäßigere Textgewichtung, unabhängig davon, ob Licht auf Dunkel oder Dunkel auf Licht gerendert wird.

Schauen Sie sich den direkten Vergleich von vorher und nachher an:

- -

UPDATE Mai 2018

-webkit-font-smoothing: subpixel-antialiasedhat jetzt keine Wirkung in Chrome, aber in Safari verbessert es die Dinge noch sehr, ABER NUR AUF RETINA. Ohne es in Safari auf Retina-Bildschirmen ist Text dünn und fade, während Text damit das richtige Gewicht hat. Wenn Sie dies jedoch auf Nicht-Retina-Displays in Safari verwenden (insbesondere bei geringen Gewichtswerten), ist Text eine Katastrophe. Es wird dringend empfohlen, eine Medienabfrage zu verwenden:

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

Die explizite Einstellung -webkit-font-smoothing: subpixel-antialiasedist die derzeit beste Lösung, wenn Sie den dünneren Antialias-Text zumindest teilweise vermeiden möchten.

--tl; dr--

Sowohl in Safari als auch in Chrome, wo das Standard-Rendering von Schriftarten Subpixel-Antialiasing verwendet, führt jedes CSS, das GPU-basiertes Rendering erzwingt, wie die obigen Vorschläge, eine Transformation mit translateZ oder sogar nur einen Skalierungsübergang zu verwenden, dazu, dass Safari und Chrome automatisch "aufgeben" "Bei der Glättung von Subpixel-Antialiasing-Schriftarten wechseln Sie stattdessen zu nur Antialiasing-Text, der vor allem auf Safari viel heller und dünner aussieht.

Andere Antworten konzentrierten sich auf die Aufrechterhaltung eines konstanten Renderings, indem einfach die Schriftglättung auf den dünneren Antiailias-Text eingestellt oder erzwungen wurde. Meines Erachtens verschlechtert die Verwendung von translateZ oder der verborgenen Rückseite die Qualität der Textwiedergabe erheblich. Die beste Lösung, wenn der Text nur konsistent bleiben soll und Sie mit dem dünneren Text einverstanden sind, ist nur die Verwendung -webkit-font-smoothing: antialiased. Die explizite Einstellung hat -webkit-font-smoothing: subpixel-antialiasedjedoch tatsächlich einige Auswirkungen - der Text ändert sich immer noch geringfügig und ist bei Übergängen, die auf der GPU gerendert werden, sichtbar dünner, aber nicht so dünn wie ohne diese Einstellung. Es sieht also so aus, als würde dies zumindest teilweise die Umstellung auf geraden Antiailias-Text verhindern.

Ich habe festgestellt, dass fast jedes Mal, wenn ich Grafikprobleme (Flackern / Stottern / Abgehacktheit / usw.) aufgrund eines Übergangs mit -webkit-backface-sichtbarkeit habe: versteckt; auf die Elemente, die wirken, neigt dazu, das Problem zu lösen.

Um Änderungen der Textwiedergabe aufgrund von Hardwarebeschleunigung zu verhindern, können Sie entweder:

1. Stellen Sie den gesamten Text auf -webkit-font-Smoothing: Antialiasing ein. Dies bedeutet, dass der Text dünner und nicht mit Subpixeln versehen ist.

2. Wenn Sie möchten, dass Text, der von der Hardwarebeschleunigung betroffen ist, ein Subpixel-Antialiasing aufweist (die Standardart der Schriftglättung), wird dieser Subpixel-Antialiasing (zumindest) beibehalten, wenn Sie diesen Text in eine Eingabe ohne Rahmen und deaktiviert einfügen unter Chrome unter Mac OS X). Ich habe dies nicht auf anderen Plattformen getestet, aber wenn Subpixel-Antialiasing wichtig ist, können Sie diesen Trick zumindest anwenden.

Wenn Sie Firefox auf einem Mac verwenden, sollten Sie das folgende CSS verwenden, um das Problem zu beheben.

-moz-osx-font-smoothing: grayscale;

Mehr dazu unter Webfont Smoothing und Antialiasing in Firefox und Opera

Das hat bei mir funktioniert. Ich hoffe es hilft. Gefunden in anderen Stackoverflow-Post.

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

Um die Rendering-Änderung zu verhindern, müssen Sie festlegen font-smoothing: antialiased(odernone ) .

Der Browser, der das Rendern von Subpixel-Schriftarten deaktiviert, ist wahrscheinlich ein Nebeneffekt der Hardwarebeschleunigung. Wenn sich der Hintergrund, vor dem Sie rendern, ständig ändert, kann der Text nicht auf einer separaten Ebene gerendert werden, da jeder Frame mit allen Hintergrundebenen verglichen werden muss. Dies könnte die Leistung erheblich beeinträchtigen.

Apple oft deaktivieren Subpixel Font-Glättung auf ihre eigenen Websites.

Zusätzlich zu den oben genannten Lösungen ( -webkit-transform: translateZ(0px)auf dem Element und -webkit-font-smoothing: antialiasedauf der Seite) können sich einige Elemente immer noch schlecht verhalten. Für mich war es Platzhaltertext in einem Eingabeelement: Verwenden Sie dazuposition:relative

Ich hatte das gleiche Problem. Lesen Sie es sorgfältig:

Ich stelle fest, dass der Rest des Textes auf der Seite (in Webkit) beim Übergang des Elements dazu neigt, das Rendering geringfügig zu ändern, bis der Übergang abgeschlossen ist.

Keine der oben genannten Lösungen schien zu funktionieren. Allerdings Einstellung (Dinge wie)

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

auf dem Element, das die Animation hat hat, hat funktioniert.

Indem Sie das animierte Element in die GPU-Ebene bringen, nehmen Sie es aus dem normalen Fluss des Seiten-Renderings heraus (Dinge wie z-Index funktionieren beispielsweise auch nicht mehr). Als Nebeneffekt beeinflussen sich die Animation und der Rest der Seite nicht mehr gegenseitig.

Wenn es sich auf das Rendern Ihrer Schrift auswirkt, gilt dies natürlich nur für das animierte Element. Ich sehe keinen Unterschied in meinem Chrome.