Chrome中CSS Color Level 4颜色显示不一致问题排查

原因分析： #

• Chrome 111对Display P3这类扩展色域的渲染逻辑存在窗口上下文相关的bug：当页面的窗口状态（比如标签页拖成独立窗口、取消最大化）或页面背景环境（切换到深色模式页面）变化时，Chrome会错误地重置当前页面的色彩配置，强制将Display P3颜色压缩到sRGB色域范围内，导致你看不到P3和sRGB的颜色差异。
• 你提到的「拖回标签页、打开特定页面再切回能恢复色域」，说明Chrome的色彩管理模块在某些场景下能重新识别页面的色域需求，但触发逻辑不稳定，属于典型的bug表现。
• 排除显示器故障：如果是硬件问题，不会出现「操作后可反复切换色域状态」的情况，显示器要么一直无法显示P3，要么一直正常，不会随窗口操作变化。

复现代码 #

CSS

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);
}

HTML

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

内容的提问来源于stack exchange，提问作者tvanc