CSS mix-blend-mode: difference为何跨浏览器及显示器渲染效果不一致？

问题现象 #

开发叠放视觉效果时使用mix-blend-mode: difference实现特殊混合效果，近期观测到明确异常：

• WebKit内核浏览器的特定场景下，应用该混合模式的div元素显示颜色比预期明显偏暗
• 异常的复现条件非常固定：仅在MacBook Pro内置显示屏上出现，外接经过色彩校准的显示器无该问题

复现逻辑说明 #

本次异常对应的Demo设计了颜色校验逻辑：两个相邻div的最终显示颜色理论上应当完全一致——

1. 第一个div直接设置固定十六进制色值#04f作为背景，无额外混合属性
2. 第二个div设置上述色值的完全反相色值#fb0作为背景，同时应用mix-blend-mode: difference混合模式，放置于纯白#fff的父容器背景上

按照difference混合模式的计算规则，纯白背景下对反相色值做差分计算，最终输出的颜色应当和第一个div的固定色值完全相同。

对应的复现代码：

<!-- HTML 结构 -->
<div class="background">
  <div class="plain-color"></div>
  <div class="blend-color"></div>
</div>

/* 对应样式 */
.background {
  background-color: #fff;
}

.plain-color,
.blend-color {
  width: 200px;
  height: 200px;
}

.plain-color {
  background-color: #04f;
}

.blend-color {
  background-color: #fb0;
  mix-blend-mode: difference;
}

交叉测试结果 #

为定位异常边界，分别在不同浏览器、不同显示屏下做了对照测试：

• 显示屏维度：外接经过专业色彩校准的显示器上，两个div颜色完全匹配；将浏览器窗口移动到MacBook Pro内置显示屏上时，应用混合模式的div颜色明显深于普通背景的div
• 浏览器维度：Firefox在两块显示屏上查看时，两个div的颜色完全匹配，无偏差；仅Safari、Chrome等基于WebKit内核的浏览器在MacBook Pro内置屏上会出现偏暗问题

待明确的核心疑问 #

目前已经感知到现象和WebKit、Gecko引擎的架构差异有关，但无法解释同一浏览器在不同显示设备上渲染结果存在差异的原因，对问题的底层成因没有明确判断。

实际渲染效果参考：Chrome外接显示器下两个色块颜色无可见差异；MacBook Pro内置屏下Chrome渲染的混合模式色块明显偏暗

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