Why does enabling hardware-acceleration in CSS3 slow down performance?

Question

I am moving 6000 small div elements in an css3 experiment using a transition from top: 0 to top: 145px to test performance.

Using no hardware-acceleration runs smooth on Google Chrome.

If I enable hardware-acceleration via translateZ(0) performance becomes horrible.

Why is that so?

Here is my example code: http://dl.dropboxusercontent.com/u/17844821/tmp/hwtest.html

---

Update (2014-11-13): Since this question is still attracting attention I'd like to point out that the problem itself still seems to exist although the mentioned stuttering might not be visible anymore in the provided demo on modern hardware. Older devices might still see performance issues.

Answer 1

I always add :

-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;

When working with 3d transform. Even "fake" 3D transforms. Experience tells me that these two lines always improve performances, especially on iPad but also on Chrome.

I did test on your exemple and, as far as I can tell, it works.

As for the "why" part of your question... I don't know. 3D transform are a young standard, so implementation is choppy. That's why it's a prefixed property : for beta testing. Someone could fill a bug report or a question and have the team investigate.

Edit per August 19th 2013:

There's regular activity on this answer, and I just lost an hour finding that IE10 also need this. So don't forget :

backface-visibility: hidden;
perspective: 1000;