Frage Wie kann verhindert werden, dass sich das Webkit-Text-Rendering während des CSS-Übergangs ändert?


Ich verwende CSS-Übergänge, um zwischen CSS-transformierten Zuständen zu wechseln (im Grunde geht es um die Skalierung eines Elements). Ich stelle fest, dass der Rest des Texts 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/

Mir ist auch aufgefallen, dass dies bei meinen Kopfzeilen, die die haben, nicht auftritt -webkit-font-smoothing: antialiased Eigenschaft / Wert-Paar auf ihnen. Also, ich frage mich, gibt es eine Möglichkeit, dass der Text sein Standard Aussehen (der "Auto" -Wert für font-smoothing) beibehalten und Rendering während eines Übergangs nicht ändern.

Ich habe versucht, den Text explizit zu setzen, um den "Auto" -Wert zu verwenden, aber das tut nichts. Ich sollte auch beachten, dass das Einstellen der Schriftglättung auf "keine" verhindert, dass das Rendering während des Übergangs blinkt.

Jede Hilfe wird geschätzt.

Bearbeiten 1

Ich sollte beachten, dass ich auf OS X bin. Während ich meinen Test in Chrome auf Parallels sah, sah ich nicht, dass sich die zwei verschiedenen Absätze anders verhielten, also könnte dies ein ausschließliches Problem für Macs sein.


75
2017-09-19 20:16


Ursprung


Antworten:


Ich denke ich habe eine Lösung gefunden:

-webkit-transform: translateZ(0px);

Hardware-Beschleunigung erzwingen auf dem Elternelement scheint das Problem zu lösen ...

BEARBEITEN Wie bereits erwähnt, deaktiviert dieser Hack die Schriftglättung und kann die Textwiedergabe je nach Schriftart, Browser und Betriebssystem beeinträchtigen!


77
2017-10-10 13:19



UPDATE Mai 2018

-webkit-font-smoothing: subpixel-antialiased hat jetzt keinen Effekt in Chrome, aber in Safari verbessert es die Dinge noch sehr, ABER NUR BEI RETINA. Ohne es in Safari auf Retina Screens ist Text dünn und fade, während mit ihm Text das richtige Gewicht hat. Aber wenn Sie dies auf Nicht-Retina-Displays in Safari verwenden (vor allem bei geringen Werten), ist Text ein Desaster. Empfehlen Sie dringend eine Medienabfrage zu verwenden:

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


Explizit festlegen -webkit-font-smoothing: subpixel-antialiased ist die beste aktuelle Lösung, wenn Sie den dünneren antialiased Text mindestens teilweise vermeiden möchten.

--tl; dr--

Sowohl in Safari als auch in Chrome, wo das Standard-Font-Rendering Subpixel-Antialiasing verwendet, führen CSS, das GPU-basiertes Rendering erzwingt, wie die obigen Vorschläge zur Verwendung einer Transformation mit translateZ oder sogar nur einer Skalierung, dazu, dass Safari und Chrome automatisch aufgeben "auf subpixel-antialiased Schriftart Glättung und stattdessen auf nur antialiased Text, der viel leichter und dünner, vor allem auf Safari.

Andere Antworten haben sich darauf konzentriert, ein konstantes Rendering aufrechtzuerhalten, indem einfach die Schriftartglättung auf den dünneren antialiasierten Text gesetzt oder erzwungen wird. Für mich bedeutet die Verwendung von translateZ oder Backface hidden signifikant die Qualität der Textwiedergabe und die beste Lösung, wenn Sie möchten, dass der Text konsistent bleibt und Sie mit dem dünneren Text zufrieden sind -webkit-font-smoothing: antialiased. Allerdings explizit einstellen -webkit-font-smoothing: subpixel-antialiased hat tatsächlich einen Effekt - der Text ändert sich immer noch geringfügig und ist bei Übergängen, die auf der GPU gerendert werden, nur ungefähr dünner, aber nicht so dünn wie ohne diese Einstellung. Es scheint also so zu sein, dass dies zumindest teilweise den Wechsel zu einem direkt antialiasierten Text verhindert.


45
2018-01-15 11:23



Ich habe festgestellt, dass jedes Mal, wenn ich Grafikprobleme (Flimmern / Stottern / Funkionen / etc) aufgrund eines Übergangs habe, die Verwendung von -webkit-backface-visibility: hidden; auf die Elemente, die sich verhalten, neigt dazu, das Problem zu lösen.


18
2017-07-16 20:03



Um Änderungen am Text-Rendering aufgrund von Hardware-Beschleunigung zu verhindern, können Sie entweder:

  1. Setzen Sie den gesamten Text auf -webkit-font-smoothing: antialiased. Dies bedeutet, dass Text dünner und nicht antialiased ist.

  2. Wenn Sie möchten, dass Text, der von der Hardwarebeschleunigung betroffen ist, ein Subpixel-Antialiasing ist (die Standardschriftart-Glättung), wird dieser Subpixel ohne Anti-Aliasing (mindestens in Chrome unter Mac OS X). Ich habe dies nicht auf anderen Plattformen getestet, aber wenn Antialiasing mit Subpixel wichtig ist, können Sie zumindest diesen Trick anwenden.


8
2018-03-06 06:59



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

-moz-osx-font-smoothing: grayscale;

Mehr dazu bei Webfont Glättung und Antialiasing in Firefox und Opera


5
2018-04-03 19:25



Das hat bei mir funktioniert. Ich hoffe es hilft. Gefunden in anderen stackoverflow Pfosten.

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

2
2018-04-24 15:39



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

Der Browser, der das Subpixel-Font-Rendering deaktiviert, ist wahrscheinlich ein Nebeneffekt der Hardwarebeschleunigung. Wenn der Hintergrund, gegen den gerendert wird, ständig verschoben wird, kann der Text nicht auf einer separaten Ebene gerendert werden, da jeder Rahmen gegen alle Hintergrundebenen geprüft werden muss. Dies könnte die Leistung stark beeinträchtigen.

Apple deaktiviert oft Subpixel Font-Glättung an ihr  besitzen Websites.


1
2017-09-22 12:11



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


1
2018-05-15 16:57



Ich hatte das gleiche Problem. Lies es sorgfältig:

Ich merke, dass wenn das Element übergeht, der Rest des Textes   auf der Seite (in Webkit) neigt dazu, sein Rendering bis leicht zu ändern   Der Übergang ist abgeschlossen.

Keine der obigen Lösungen schien zu funktionieren. Einstellung (Dinge wie)

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

auf dem Element das hat die Animation funktionierte.

Indem Sie das animierte Element zur GPU-Ebene bringen, nehmen Sie es aus dem normalen Fluss des Seitenrenderings 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 Ihre Schriftartwiedergabe betrifft, tut es natürlich nur für das animierte Element. Ich sehe den Unterschied in meinem Chrome nicht.


-1
2018-04-04 22:21