Webkit Text Aliasing wird während CSS3 Animationen komisch

Dies ist ein funky. Ich bin mir sicher, dass es sich um ein Webkit handelt, da es in Chrome Version 20.0.1132.57 und Safari 5.1.7 nur ein Problem zu sein scheint. Ich habe ein kurzes Video hochgeladen, um das Problem zu erklären, da es fast unmöglich wäre, es per Text zu erklären.Webkit Text Aliasing wird während CSS3 Animationen komisch

Video: http://youtu.be/0XttO-Diz2g

Kurzversion: Während CSS3 Animationen, Text, der in einem positioniertes Element (absolut oder relativ) ist, scheint seine Anti-Aliasing zu ändern. Während Animationen laufen, wird es kühner.

Hinweis: Dies ist nicht das gleiche wie skalierte Elemente verschwommen eine Animation animieren. (this issue)

Irgendwelche Gedanken, Workarounds, etc?

Quelle

2012-07-21 Jeremy Ricketts

Der entsprechende Code ist in dem Video, aber ich werde versuchen, es bald in jsFiddle neu zu erstellen. –

Der Video-Link funktioniert nicht mehr. – ChrisF

Ein Jsfidle, der das Problem demonstriert, ist [hier] (http://jsfiddle.net/russelluresti/UeNFK/) (mit freundlicher Genehmigung von [diese ähnliche Frage]) (http://stackoverflow.com/questions/12502234/how-to-prevent -webkit-text-rendering-change-während-css-übergang)). –

Update: Meine alte Antwort unten funktioniert, ist aber nur ein hacky Weg, um das Problem zu lösen. Lesen Sie dies stattdessen aus dem Grund, warum andere Elemente betroffen sind: http://jsbin.com/efirip/5/quiet. Kurz gesagt: Ein animiertes Element sollte in einem eigenen Stacking-Kontext platziert werden, indem man ihm z-index gibt.

Alte Antwort:

Es ist WebKit verwendet. Ehrlich gesagt bin ich nicht sicher, warum es das tut und ich nehme an, es ist auch ein Fehler. Sie können dies verhindern, indem Sie zu jedem Element auf der Seite eine 3D-bezogene CSS3-Deklaration hinzufügen. Beispiel:

body { 
    -webkit-transform: translateZ(0); 
}

Oder:

body { 
    -webkit-backface-visibility: hidden; 
}

Das Vorhandensein dieser Erklärungen verursacht WebKit-Hardware-Beschleunigung für die Animationen zu verwenden, die das Problem, das Sie heraus haben darauf verhindert.

Quelle

2012-07-21 08:27:19

WOW. Das hat funktioniert. Wie um alles in der Welt hast du das herausgefunden? Gut gemacht! –

Nur ein Stich in die Dunkelheit! –

** + 1 ** Ausgezeichnete Antwort! – arttronics

Webkit Text Aliasing wird während CSS3 Animationen komisch

Antwort

Verwandte Themen