Пост-анимация размытого/искаженного текста на основе Webkit с помощью переводчика3d ⇐ CSS

[Anonymous]

Похоже, эта проблема затрагивает все браузеры на базе WebKit, включая iPhone.

Сначала немного предыстории. На сайте, над которым я работаю, используется анимация слайдера на основе JavaScript.

Я использую -webkit-transform:translate3d для «power» настоящая анимация. При использовании этого метода, в отличие от метода на основе JavaScript, текст становится размытым после анимации содержимого. Это особенно заметно на iPhone.

Я видел несколько обходных путей: удалить относительное позиционирование, что я и сделал, и добавить правило для -webkit-font- сглаживание: сглаживание, что я тоже сделал. Ни одно из изменений не имело ни малейшего значения.

Единственный способ заставить эту работу работать правильно без размытия текста — использовать обычный JavaScript для анимации и вообще обойдите Translate3d. Я бы предпочел использовать Translate3d, потому что он работает намного быстрее на устройствах с поддержкой WebKit, но я, хоть убей, не могу понять, почему он так плохо влияет на текст .

Будем очень признательны за любые предложения и решения.

Подробнее здесь: https://stackoverflow.com/questions/641 ... ranslate3d