title: Trigger GPU rasterization in Chrome from HTML/CSS for background image animation
body: <p>When it comes to certain operations, such as <a href="https://code.google.com/p/chromium/issues/detail?id=507015" rel="nofollow">animating CSS backgrounds with keyframes, Chrome is horribly CPU-intensive</a>, compared to Firefox or IE (40% CPU and 60% GPU vs. 5% and 15%).</p>
  
  <p><a href="https://www.chromium.org/developers/design-documents/chromium-graphics/how-to-get-gpu-rasterization" rel="nofollow">This Chromium page</a> claims that to force GPU rasterization, you can add this tag to the HTML:</p>
  
  <pre><code>&lt;meta name="viewport" content="width=device-width, minimum-scale=1.0"&gt;
  </code></pre>
  
  <p>However, that is supposed to work only on some Android devices.</p>
  
  <p>Is there a similar trigger for the desktop version of Chrome? The <a href="https://aerotwist.com/blog/on-translate3d-and-layer-creation-hacks/" rel="nofollow">null-transform hack</a> didn't work in Chrome 43 (<a href="http://codepen.io/dandv/pen/QbmbrW" rel="nofollow">full demo</a>).</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    margin: 0;
    width: 100%;
    height: 100vh;
    background: url('http://subtlepatterns.com/patterns/perforated_white_leather.png') repeat;
    background-size: 300px auto;
    -webkit-animation: animatedBackground 5s linear infinite;
    
    /* doesn't actually force GPU rasterization */
    -webkit-transform: translateZ(0);
    transform: translate3d(0, 0, 0);
  }
  
  /* for Opera, Safari */
  @-webkit-keyframes animatedBackground {
    0% {
      background-position: 0 0;
    }
    100% {
      background-position: -300px 0;
    }
  }</code></pre>
  </div>
  </div>
  </p>