title: Why does enabling hardware-acceleration in CSS3 slow down performance?
body: <p>I am moving 10,000 small div elements in a css3 experiment from the top of the browser viewport to the bottom. For this test I use 2 different approaches:</p>
  <ol>
  <li>With GPU acceleration using <code>translate3D(x, y, z)</code> or <code>translateZ(0)</code></li>
  <li>No GPU acceleration by simply adjusting the <code>top</code> property in css</li>
  </ol>
  <p>Using <strong>NO</strong> hardware-acceleration runs fairly smooth on Google Chrome.</p>
  
  <p>If I enable hardware-acceleration performance becomes a lot worse. It's so bad the boxes aren't even spread out evenly anymore:</p>
  <h3>With GPU/Hardware acceleration:</h3>
  <hr />
  <img src="https://www.timo-ernst.net/misc/hwtest/video/gpu.gif" alt="">
  <hr />
  <h3>Without GPU/Hardware acceleration:</h3>
  <hr />
  <img src="https://www.timo-ernst.net/misc/hwtest/video/no-gpu.gif" alt="">
  <hr />
  <h3>Question</h3>
  <p>Why is that so? Shouldn't using the GPU improve performance?</p>
  <h3>Demo application</h3>
  <p><a href="https://www.timo-ernst.net/misc/hwtest/" rel="nofollow noreferrer">https://www.timo-ernst.net/misc/hwtest/</a></p>
  <h3>Source</h3>
  <p><a href="https://github.com/valnub/hwtest" rel="nofollow noreferrer">https://github.com/valnub/hwtest</a></p>
  <h3>My hardware used for test</h3>
  <ul>
  <li>Apple Macbook Pro 15&quot; 2015 Model</li>
  <li>CPU 2,8 GHz Intel Core i7</li>
  <li>16 GB RAM</li>
  <li>macOS Big Sur 11.2</li>
  </ul>
  <hr />
  <p><em><strong>Update</strong> (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 <strong>on modern hardware</strong>. Older devices might still see performance issues.</em></p>
  <p>*<strong>Update II</strong> (2021-02-17): The problem still persists but you will have to increase the number of boxes being moved in the demo based on the hardware used. I changed the UI of the demo app so you can now adjust the number of boxes moved to create a stuttering animation for your specific hardware. To replicate the issue I recommend to create enough boxes to see stuttering with GPU/hardware acceleration enabled. Then tick off the box and run the test again without acceleration. The animation should be smoother.</p>