使用OKLCH颜色的元素在Chrome中出现色带问题的原因是什么？

一、修复降级颜色不生效的问题 #

你之前使用@supports (color: color(display-p3 1 1 1 / 1))检测OKLCH支持的逻辑不准确——Chrome支持display-p3但OKLCH渲染存在bug，正确做法是直接检测浏览器对OKLCH颜色的支持：

.bg-purple {
  /* 先设置降级的十六进制颜色 */
  background-color: #6a4c93;
  height: 80vh;
}

/* 仅在支持OKLCH的浏览器中覆盖颜色 */
@supports (background-color: oklch(0% 0 0)) {
  .bg-purple {
    background-color: oklch(43.34% 0.2575 284.05);
  }
}

若想强制Chrome使用降级色，可添加Chrome专属媒体查询跳过OKLCH规则：

@media screen and (-webkit-min-device-pixel-ratio:0) and (min-resolution:.001dpcm) {
  .bg-purple {
    background-color: #6a4c93 !important;
  }
}

二、修复Chrome顶部浅色区域渲染bug #

若仍想保留OKLCH颜色，可通过触发硬件加速修复渲染异常：

.bg-purple {
  background-color: oklch(43.34% 0.2575 284.05);
  height: 80vh;
  /* 触发硬件加速，修复渲染条纹/浅色区域问题 */
  transform: translateZ(0);
  will-change: background-color;
}

三、终极替代方案 #

如果上述方法无效，可使用在线颜色转换工具将OKLCH颜色转换为接近的SRGB十六进制值，直接使用该值作为背景色，彻底规避OKLCH的渲染兼容性问题。

问题说明 #

我制作了极简演示页面，HTML代码如下：

<body style="margin:0">
    <div class="bg-purple" style="background-color: oklch(43.34% 0.2575 284.05); height:80vh">
</body>

页面在Safari、Firefox和Arc浏览器中显示为纯色紫色背景，但在MacOS版本124.0.6367.119的Chrome浏览器中，顶部出现浅色区域，且区域大小随屏幕尺寸变化。

尝试将OKLCH颜色放入@supports (color: color(display-p3 1 1 1 / 1))条件语句中并设置十六进制降级色，但Chrome忽略降级色仍渲染OKLCH颜色。

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