Inconsistent colors in Chrome

Question

Chrome 111 just launched with support for CSS Color Level 4, which means its added support for expanded color spaces beyond just sRGB.

Here's a codepen demonstrating a comparison (reproduced below). If your display supports HDR you should see a red square and a green square. Inside the red square there should be another square of a deeper red. And inside the green square, another square of a much brighter green.

However, sometimes there's no difference between the shades of red and green. Unmaximizing the window, switching to a dark page for a while (like stackoverflow in dark mode) and then coming back to the codepen, and various other activities seem to "de-activate" the expanded color palette.

Opening this page, and then switching back to the codepen reliably "re-activates" the expanded color palette.

Most reliably, when the expanded color palette is active, I can drag the tab with the codepen out of the Chrome window and the palette contracts. I drag the window back in, and the palette expands. I can go back and forth.

Is this a bug in Chrome? A fault in my monitor? Or something else?

Unfortunately I can't capture any of this in screenshots because the HDR colors get flattened no matter how I try to capture. I even tried the Xbox Game Bar. And of course your screen would also have to support HDR.

body { display: flex; gap: 2vw; }

div {
  position: relative;
  width: 20vw;
  height: 46vh;
}

div div {
  left: 2vw;
  top: 5vh;
  width: 16vw;
  height: 36vh;
}

div:nth-child(1) {
  background-color: rgb(255, 0, 0);
}

div:nth-child(1) div {
  background-color: color(display-p3 1 0 0 / 1);
}

div:nth-child(2) {
  background-color: rgb(0, 255, 0);
}

div:nth-child(2) div {
  background-color: color(display-p3 0 1 0 / 1);
}

<div><div></div></div>
<div><div></div></div>