New composite layers in google chrome due to unsquashable content

Question

What does it exactly mean when chrome profiler says "Layer was separately composited because it could not be squashed"

I was making changes to my html and i introduced a fixed position div inside a relative div and gave will-change:transform 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.

Here's a screenshot if that helps.

PS - i am running performance analysis on an angular app and found this thing.

Answer 1

There are a number of different reasons why squashing cannot be performed. I can't find much about it, but looking at the C++ code, there's a SquashingDisallowedReasons class with a reasons map, which may give you some insight into it. You could compare your DOM elements to the reasons.

 { CompositingReasonOverlap,
        "overlap",
        "Overlaps other composited content" },
 { CompositingReasonSquashingDisallowed,
        "squashingDisallowed",
        "Layer was separately composited because it could not be squashed." }

Source: CompositingReasons class

GPU Accelerated Compositing in Chrome provides some details about the rendering in Blink, but it's quite a complex and involved topic by the looks of it. I wish there were better explanations around.