Сглаживание текста Webkit становится странным во время анимации CSS3

Это напуганный. И я уверен, что это связано с webkit, поскольку это, похоже, проблема в Chrome Version 20.0.1132.57 и Safari 5.1.7. Я загрузил короткое видео, чтобы объяснить проблему, потому что было бы невозможно объяснить с помощью текста.

Видео: http://youtu.be/0XttO-Diz2g

Краткая версия: Во время анимации CSS3 текст, находящийся внутри позиционированного элемента (абсолютный или относительный), кажется, сменяет его сглаживание. Он становится более смелым во время анимации.

Примечание: Это не то же самое, что масштабированные элементы становятся размытыми при анимации. (этот вопрос)

Любые мысли, обходные пути и т.д.?

Ответ 1

Обновление: мой старый ответ ниже работает, но это всего лишь хакерский способ решить проблему. Вместо этого прочитайте это по причине того, почему другие элементы затронуты: http://jsbin.com/efirip/5/quiet. Короче: анимированный элемент должен быть помещен в свой собственный контекст стекирования, предоставив ему z-index.

Старый ответ:

Он связан с WebKit. Честно говоря, я не уверен, почему он это делает, и я предполагаю, что это тоже ошибка. Вы можете предотвратить это, добавив любую связанную с 3D CSS3 декларацию любому элементу на странице. Пример:

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

Или:

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

Наличие этих объявлений заставляет WebKit использовать аппаратное ускорение для анимаций, которое предотвращает указанную проблему.