translate3d vs css left/top and hardware acceleration

Question

As I understand hardware acceleration on iOS devices is enabled when using translate3d(). So why this test on jsperf shows that using css left/top is faster?

Terpsichorean

Answer 1

I have used translate3d extensively on iOS in lieu of CSS left/top, and I can say one thing:

It is truly faster for animating things (which jsperf does not seem to do.) My guess is, left/top is faster when benchmarking since nothing is animated and I don't think anything is displayed either.

It is when used in conjunction with transition (or -webkit-transition) that translate3d works its magic.

Guthrey