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

UPDATE Mai 2018

-webkit-font-smoothing: subpixel-antialiased hat jetzt keine Wirkung in Chrom, aber in Safari ist es noch bessere Dinge, die viel, ABER NUR AUF der NETZHAUT. Ohne es in Safari auf retina-Bildschirme text ist Dünn und geschmacklos, in der Erwägung, dass mit text hat das richtige Gewicht. Aber wenn Sie diese auf nicht-retina-displays in Safari (vor allem auf geringes Gewicht-Werte) der text ist eine Katastrophe. Stark empfehlen die Verwendung von einem media-query :


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


Explizit Einstellung -webkit-font-smoothing: subpixel-antialiased ist die beste derzeitige Lösung, wenn Sie wollen, um mindestens teilweise zu vermeiden, die dünner Antialias-text.

--tl;dr--

Sowohl mit Safari und Chrome, auf dem die default-schriftart-rendering verwendet, subpixel-antialiasing, alle CSS -, die Kräfte GPU based rendering, die wie die obigen Vorschläge zu verwenden, eine Transformation mit translateZ oder auch nur einer Skala übergang, wird dazu führen, Safari und Chrome automatisch "aufgeben" auf subpixel-Antialiasing Schriftarten-Glättung und statt Schalter, um nur Antialias-text, das sieht viel leichter und dünner, vor allem auf Safari.

Anderen Antworten konzentrierten sich auf die Aufrechterhaltung einer Konstanten rendering durch einfaches setzen oder zu zwingen, Schriftglättung, die dünner antiailiased text. Zu meinem Auge mit translateZ oder backface versteckt signifikant verschlechtert sich die Qualität des text-rendering und die optimale Lösung, wenn Sie möchten, den text einfach konsistent bleiben, und Sie sind OK mit der dünneren text ist einfach zu verwenden -webkit-font-smoothing: antialiased. Jedoch das explizite setzen von -webkit-font-smoothing: subpixel-antialiased tatsächlich eine gewisse Wirkung haben - der text wird noch leicht ändern und ist nur über sichtlich dünner während der übergänge erfolgt auf der GPU, aber nicht so Dünn wie es geht, ohne diese Einstellung. So wie es aussieht ist dies zumindest teilweise verhindert, dass der Schalter gerade antiailiased text.

InformationsquelleAutor der Antwort atomless

Um zu verhindern, dass text-rendering-änderungen aufgrund von hardware-Beschleunigung, können Sie entweder:

1. Legen Sie alle text -webkit-font-smoothing: Antialiasing. Dies bedeutet text ist dünner und nicht sub-pixel Antialiasing.

2. Wenn Sie möchten, dass text, der beeinflusst wird durch die hardware-Beschleunigung zu sub-pixel Antialiasing (die Standard-Art der Schriftglättung), dann setzen, dass text innerhalb einer Eingabe, ohne Grenzen und Behinderte, halten, dass die sub-pixel Antialiasing (zumindest in Chrome auf Mac OS X). Ich habe nicht getestet auf anderen Plattformen, aber wenn das sub-pixel-Anti-Aliasing wichtig ist, können Sie zumindest mit diesem trick.

InformationsquelleAutor der Antwort Joran Greef

Dies ist was für mich gearbeitet. Hoffe, es hilft. In anderen stackoverflow-post.

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

InformationsquelleAutor der Antwort Daniel Almeida

Zusätzlich zu den oben genannten Lösungen (-webkit-transform: translateZ(0px) auf das element, und -webkit-font-smoothing: antialiased auf der Seite), einige Elemente mögen noch schlecht benimmt. Für mich war es Platzhalter-text in ein input-element: verwenden Sie dazu position:relative

InformationsquelleAutor der Antwort WraithKenny