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

Похоже, что и 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 "привязываются к пикселю".

Обновление: немного поигравшись, я нашел исправление для 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
   }
}