Chrome DevTools layer borders color meaning

Question

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

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.

Thanks for the Q, regarding "all devtools documentation seems to be outdated" I'm putting in a reference to `debug_colors.cc` in [View an overlay of layers with Layer Borders](https://developers.google.com/web/tools/chrome-devtools/evaluate-performance/reference#layer-borders) now — Kayce Basques, Nov 02 '17 at 20:04

score 7 · Accepted Answer · edited Sep 22 '22 at 14:48

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

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

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.
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.

score 3 · Answer 2 · answered Feb 09 '16 at 20:17

Found the answer in the source code

via

2 Answers2