Aliasing tekstu na stronie internetowej staje się dziwny podczas animacji CSS3.

Question

To jest funky. Jestem pewien, że jest to związane z webkitem, ponieważ wydaje się, że problem dotyczy tylko wersji 20.0.1132.57 i Safari 5.1.7. Przesłałem krótki film, aby wyjaśnić problem, ponieważ prawie niemożliwe byłoby wyjaśnienie go za pomocą tekstu.

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

Krótka wersja: Podczas animacji CSS3, tekst, który znajduje się wewnątrz elementu pozycjonowanego (bezwzględna lub względna) wydaje się, aby zmienić jej wygładzanie krawędzi. Staje się odważniejszy, gdy animacje są uruchomione.

Uwaga: To nie jest taka sama jak wyskalowane elementy stają się rozmyte diring animację. (this issue)

Jakieś myśli, obejścia, itp?

Answer 1

Aktualizacja: Moja stara odpowiedź poniżej działa, ale jest tylko hackowskim sposobem na rozwiązanie problemu. Zamiast tego przeczytaj to z powodów, dla których wpływają inne elementy: http://jsbin.com/efirip/5/quiet. W skrócie: animowany element powinien zostać umieszczony w swoim własnym kontekście układania, nadając mu wartość z-index.

Stara odpowiedź:

Jest związana z WebKit. Szczerze mówiąc nie jestem pewien, dlaczego to robi i zakładam, że to też błąd. Możesz temu zapobiec poprzez dodanie dowolnej deklaracji CSS3 związanej z 3D do dowolnego elementu na stronie. Przykład:

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

Lub:

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

Obecność tych deklaracji powoduje WebKit do korzystania z akceleracji sprzętowej dla animacji, która uniemożliwia problem pan zauważył.