-webkit translate3d stutters with large elements

Question

I'm animating elements using -webkit-transform: translate3d(x,y,z) and the cubic beizer timing function combined with touch-events for the iPhone to make a custom scrollmethod type thing.

Trouble is, the animations stutter (element stops for half a second) if the elements (in this case page div's) are above a certain size. If I have width 320px and height of 1000px, this all works just fine, but if I make the height 2000px I get a nasty stutter. Note that it only stutters once in the beginning, almost like it's loading and then it's fine.

Are there any known work-arounds?

Answer 1

Two possible workarounds.

First turn off other CSS properties, namely position (top, left, right, bottom), and opacity. Mixing them, especially if they are animating, can cause performance issues.

You could try experimenting with turning off as much as possible, and seeing if the issue is then fixed. If so, then turn them back on one by one, until the problem property is found.

Second, wrap your content within an iframe. Even if the iframe is set to fill the view, it can give a significant performance improvement, when it contains very large images.