Bug 112826 – CSS animation of background-position is slow and laggy

• Status: UNCONFIRMED
• Component: New Bugs

[Laurent Perez]

Hi

While prototyping parallax effects, we've noticed that animating background-position performs really slowly. Using translate3d(0,0,0) on the same element does not help.
Bug is seen on Galaxy S2, S3, HTC One S, iPhone 4, iPod 5

On Android 4, stock browser or Chrome, the lag is major. Interestingly, on Android 2, no lag is visible.
On iOS 3 to 6, it lags less, and using translate3d introduces a rolling shutter rendering bug on the animated image (http://en.wikipedia.org/wiki/Rolling_shutter)

So far, we will be using a translateX on the element instead of animating the background. I'm still filling a bug because no lag is visible on Chrome desktop.

Thanks