Text wird dünner bei Animation (Safari auf OS X)

[TobiW]

Hallo zusammen,

 

schuf bitte mal auf diese Seite: http://ironsummitmedia.github.io/startbootstrap-simple-sidebar/

 

Wenn ich da in Safari das Menü ein-/ausblende wird die Schrift währten der Animation dünner angezeigt. Alle anderen browser, die ich probiert habe (FF, Chrome, Opera auf OS X, Safari auf iOS) zeigen dieses verhalten nicht. Kann ich das irgendwie beeinflussen oder muss ich damit leben, das Safari hier was komisches macht?

 

Vile Grüße

Tobi

[Ralf Herrmann]

Entweder die animierten Elemente ändern (siehe Video) oder Text-Render-Methode generell über webkit-font-smoothing umstellen. Manche bevorzugen diese dünnere Textdarstellung ja. 

[TobiW]

Also der z-index-Trick aus dem Video hilf auf meiner Seite (http://tweh.de/pencilscope/ hier das Menü und „Animation 4“) nicht. Das Rendern zu ändern muss ich mir überlegen …

[TobiW]

Mit den Richtigen Suchbegriffen findet man dann auch ne Lösung: http://stackoverflow.com/questions/12502234/how-to-prevent-webkit-text-rendering-change-during-css-transition

 

Mit einem expliziten -webkit-font-smoothing: subpixel-antialiased verschwindet das Problem bei mir zumindest soweit, dass man es bei den Animationen nicht mehr sieht …