macOS Chrome中html与body元素background-color渲染差异原因及解决方法

问题现象 #

为html和body元素设置了完全相同的不透明背景色hsl(0, 10%, 15%)，但在macOS系统的Chrome浏览器中，二者区域呈现明显颜色差异；调整lightness值（15%左右时差异最显著）。

原因说明 #

这是macOS Chrome的颜色管理渲染bug：Chrome在渲染根元素html和其子元素body时，对HSL颜色的色彩空间转换处理逻辑不一致。html的背景色会经过系统色彩管理的额外校准，而body的背景色直接按指定HSL值渲染，最终导致视觉色差。

修复方案 #

• 方案一：仅给html设置背景色，移除body的背景色声明。body会默认继承html的背景色，避免双重渲染的色彩差异：

html {
  margin: 0;
  padding: 0;
  background-color: hsl(0, 10%, 15%);
}
body {
  margin: 0;
  padding: 0;
}

• 方案二：将HSL颜色转换为RGB/十六进制值，规避Chrome对HSL的差异化处理。比如hsl(0, 10%, 15%)对应的十六进制为#262222：

html, body {
  margin: 0;
  padding: 0;
  background-color: #262222;
}

• 方案三：给html添加background-attachment: fixed属性，强制Chrome统一渲染逻辑：

html, body {
  margin: 0;
  padding: 0;
  background-color: hsl(0, 10%, 15%);
}
html {
  background-attachment: fixed;
}

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