Анимация ключевых кадров CSS с преобразованием перевода привязывается к целым пикселям в IE 10 и Firefox ⇐ Html

[Anonymous]

Похоже, что 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