CSS混合模式：差异在浏览器和显示器之间不一致。

Question

在我正在开发的网站上，我使用mix-blend-mode:difference来在某些元素覆盖其他元素时产生有趣的效果。最近我注意到，在我的Macbook Pro显示器上的webkit浏览器中，具有mix-blend-mode:difference的div的颜色在某些特定情况下比它应该的要暗得多。

请看我的codepen：https://codepen.io/matt_o_tron_5000/pen/LYxPaLm HTML:

<div class="background">
  <div class="plain-color"></div>
  <div class="blend-color"></div>
</div>

CSS：

.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 使用普通的十六进制颜色代码作为背景色，另一个 div 使用完全相反的十六进制代码作为背景色，并应用了 mix-blend-mode:difference。

在我的外部显示器上，这两个 div 的颜色完全相同（而且是可靠的色彩准确）。但如果我将窗口移动到我的 MacBook Pro 显示屏上，混合混合模式的 div 会比另一个 div 暗得多。

此外，在 Firefox 中进行测试时，无论我在哪个显示器上查看它们，这两个 div 的颜色都完全匹配。只有在 Safari 和 Chrome 中，div 在我的 Macbook 显示器上看起来意外地暗。

我认为这与 Safari 和 Chrome 使用 WebKit 引擎有关，而 Firefox 使用不同的引擎（Gecko），但是...为什么显示器之间会有差异？我很困惑。

照片示例：

Chrome 中的 2 个 div 在外部显示器上：

在Macbook上的Chrome浏览器中，显示了2个div。

- Matt Tanner

Answer 1

抱歉，这是一个旧问题，但现在可能可以通过使用CSS color()函数指定正确的颜色配置文件来解决。这在大多数浏览器中仍然处于实验性标志后面，但似乎在Safari和刚刚发布的Chrome 111中得到了支持。

添加以下内容可以使我在支持的浏览器和至少在我的Macbook和桌面监视器之间归一化颜色。在我的桌面上仍然有轻微的差异，但它不太明显。 这是一个有效的示例。

@supports (background-color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .background {
      --colorspace: display-p3;
    }
    .plain-color {
      background-color: color(var(--colorspace, srgb) 0 calc(68 / 255) 1);
    }
    .blend-color {
      background-color: color(var(--colorspace, srgb) 1 calc(187 / 255) 0);
    }
  }
  @media (color-gamut: rec2020) {
    .background {
      --colorspace: rec2020;
    }
  }
}

你可以通过调整混合元素的颜色配置来解决大部分问题，但是调整所有元素会更加一致。我认为显示器之间的差异在于它们支持哪些颜色配置。

- dawaltco