I know I'm a little late to the party, but I thought you guys might find this interesting...
I'm seeing that top/left is <strong>MUCH</strong> faster in most browsers when more elements are animated. See the comparison at <a href="http://www.greensock.com/js/speed.html" rel="nofollow">http://www.greensock.com/js/speed.html</a>. The translate() technique is literally 400% slower (or more) under heavy stress. the only exception is iOS Safari. Weird.
So I think the performance gains you're seeing with translate() are only applicable in certain scenarios like when a few elements are animating concurrently and/or they use effects like opacity, box-shadow, etc. But there's a threshold where the "hardware acceleration" juice actually becomes a significant bottleneck (thanks to Paul Lewis for pointing that out). Then again, the sub-pixel rendering can be nice if you're not animating many elements.
Great discussion, guys.
↧