Bug 112826 - CSS animation of background-position is slow and laggy
Summary: CSS animation of background-position is slow and laggy
Status: UNCONFIRMED
Alias: None
Product: WebKit
Classification: Unclassified
Component: New Bugs (show other bugs)
Version: 528+ (Nightly build)
Hardware: Android Android
: P2 Normal
Assignee: Nobody
URL:
Keywords:
Depends on:
Blocks:
 
Reported: 2013-03-20 12:09 PDT by Laurent Perez
Modified: 2013-03-20 12:09 PDT (History)
0 users

See Also:

Attachments
Add an attachment (proposed patch, testcase, etc.)

Note You need to log in before you can comment on or make changes to this bug.
Description Laurent Perez 2013-03-20 12:09:55 PDT 
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