Search code examples
google-chromegoogle-chrome-devtoolswill-change

Chrome DevTools layer borders color meaning

I have two DOM elements that exist on their own composite layers because of this CSS rule:

.element-one, 
.element-two {
    will-change: transform;
    transform: translateZ(0); // Fallback
}

Now, I can inspect these layers using Chrome dev tool's Show layer borders option.

All great! And this is what I see

enter image description here

I am familiar with the orange border color and it means the element exists on its own composite layer. But what does the green color indicate?

All dev tool documentation seem to be outdated.

Solution

  • The Chromium source's debug_colors.cc details the definitions.

    Basically there are 2 types of things enabled with Show layers borders is on.

    1. Composited layers get a visual border. They are most usually orange and olive. But can also be green, pale blue, yellow, blue-ish green, blue or purple.
    2. GPU tiles are marked with borders on their edges. You can generally ignore tiles, as they are an implementation detail. Typically they are cyan, but you may also see purple, yellow, green, dark grey, grey, red or chartreuse tiles.