Похоже, что IE 10 и Firefox привязывают элементы к целым пикселям при анимации их положения с помощью преобразования 2D-преобразования в анимации ключевых кадров CSS.
Chrome и Safari этого не делают, что выглядит намного лучше при анимации тонких движений.
Анимация выполняется следующим образом:
@keyframes bobbingAnim {
0% {
transform: translate(0px, 0px);
animation-timing-function:ease-in-out
}
50% {
transform: translate(0px, 12px);
animation-timing-function:ease-in-out
}
100% {
transform: translate(0px, 0px);
animation-timing-function:ease-in-out
}
}
Вот пример того, что я имею в виду:
http://jsfiddle.net/yZgTM/.
Просто откройте его в Chrome и IE 10 (или Firefox), и вы заметите разницу в плавности движения.
Я понимаю, что на такое поведение может влиять множество факторов, например, если элемент рисуется с аппаратным ускорением или нет.
Знает ли кто-нибудь исправление, позволяющее заставить браузеры всегда рисовать элементы на субпикселях?
Я нашел похожий вопрос, но ответ заключался в анимации с использованием преобразования преобразования, что именно я и делаю:
CSS3 Transitions «привязывается к пикселю».
Обновление:
Поигравшись немного, я нашел исправление для Firefox, однако оно ничего не делает в IE 10. Хитрость заключается в том, чтобы немного уменьшить масштаб элемента и использоватьtranslate3d со смещением в 1 пиксель по оси Z:
@keyframes bobbingAnim {
0% {
transform: scale(0.999, 0.999) translate3d(0px, 0px, 1px);
animation-timing-function:ease-in-out
}
50% {
transform: scale(0.999, 0.999) translate3d(0px, 12px, 1px);
animation-timing-function:ease-in-out
}
100% {
transform: scale(0.999, 0.999) translate3d(0px, 0px, 1px);
animation-timing-function:ease-in-out
}
}
Подробнее: https://stackoverflow.com/questions/168 ... s-in-ie-10
