title: New composite layers in google chrome due to unsquashable content
body: <p>What does it exactly mean when chrome profiler says "Layer was separately composited because it could not be squashed"</p>
  
  <p>I was making changes to my html and i introduced a fixed position div inside a relative div and gave <code>will-change:transform</code> on it. After doing that chrome created two more new layers as a side effect. I want to understand the exact reason as to what caused chrome to create these new composite layers and what action does trigger such kinds of new layers in chrome.</p>
  
  <p>Here's a screenshot if that helps.</p>
  
  <p><a href="https://i.stack.imgur.com/VE3Kn.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/VE3Kn.png" alt="enter image description here"></a></p>
  
  <p>PS - i am running performance analysis on an angular app and found this thing.</p>