How to fix slow scrolling when using webkit transform and relative positioning on iphone

Question

I implemented scrolling div using relative positioning and webkit animation for iphone, works fine on desktop safari, but changed on actual iphone (great on simulator).

Scrolling works with a div nested and trimmed (overflow: hidden) by its parent. Then I set the top position and animate it with -webkit style declarations. Obviously, the iphone slows down noticeably when there are a lot of elements in the inner div.

Any ideas how to make scrolling smoother?

This was a problem with the iScroll code and my own encoded content.

Answer 1

Using translate3d is much faster than direct translation, as it uses hardware acceleration.