title: Can I force the browser to rasterize elements before they become visible?
body: <p>Call me crazy, but I'm working on a game using vanilla DOM and TypeScript. It's not action-heavy, but there are some animations going on, which are driven from JavaScript (too complex to do in CSS).</p>
  
  <p>I'm already applying <a href="https://developers.google.com/web/fundamentals/performance/rendering/stick-to-compositor-only-properties-and-manage-layer-count" rel="nofollow noreferrer">the common trick of <code>translateZ(0)</code></a> (called <a href="https://aerotwist.com/blog/on-translate3d-and-layer-creation-hacks/" rel="nofollow noreferrer">null transform hack</a> or less accurately <a href="https://www.html5rocks.com/en/mobile/optimization-and-performance/" rel="nofollow noreferrer">silver bullet</a>) to pull animated elements into their own rendering layer, and I'm animating nothing besides compositor-only properties (<code>transform</code> and <code>opacity</code>). This works beautifully: during the game, everything feels buttery smooth, even on older mobile devices.</p>
  
  <p>The problem is during the start of the game. At that moment, about 70 individually transformed and animated elements enter the page one by one over the space of a few seconds, by animating their <code>opacity</code> from 0 to nonzero. This is causing visible stutter during the animation.</p>
  
  <p>My guess was that Chrome is being too clever here, and will only rasterize each element at the moment it first becomes visible. A quick check with the dev tools confirms this, as there's a lot of rasterization going on even during the animation:</p>
  
  <p><a href="https://i.stack.imgur.com/vMJUd.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/vMJUd.png" alt="Lots of &quot;Rasterize Paint&quot; going on"></a></p>
  
  <p>I would prefer to rasterize all these elements once, before the animation starts, and only then trigger the animation. But how can I force rasterization of elements that aren't yet visible, without showing a flash of them to the user?</p>
  
  <p>I'd be happy with a Chrome-only approach, but cross-browser would be even better.</p>