Bug 112826
| Summary: | CSS animation of background-position is slow and laggy | ||
|---|---|---|---|
| Product: | WebKit | Reporter: | Laurent Perez <l.laurent.p> |
| Component: | New Bugs | Assignee: | Nobody <webkit-unassigned> |
| Status: | UNCONFIRMED | ||
| Severity: | Normal | ||
| Priority: | P2 | ||
| Version: | 528+ (Nightly build) | ||
| Hardware: | Android | ||
| OS: | Android | ||
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
| Attachments | ||
|---|---|---|
| Add attachment proposed patch, testcase, etc. |