MacOS 版 Chrome 以不同方式处理 CSS 滤镜亮度和色调旋转属性

Question

小背景：我将图像和图标存储为纯红色，然后允许网站管理员调整色调旋转和亮度，从而允许他们控制配色方案/主题。

我面临的问题是，在 Mac OS Chrome 中，CSS 过滤器属性的输出渲染方式截然不同。

我已经在 JS Fiddle 上做了问题证明：https://jsfiddle.net/2v5eb0at/6/

两个

div

元素应该具有相同的颜色，并且在除 Mac OS Chrome 之外的每个浏览器上都是相同的颜色，但在 Mac OS Chrome 中，过滤后的 div 是 #ffe400。

在我们的几个使用 Mac 操作系统的团队中进行了复制，但我运行 Windows，因此无法直接测试，令人烦恼的是，当在 BrowserStack 中测试时，问题不存在......

如果小提琴打不开，代码是：

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

<style>
div {
  background: #ff0000;
  width: 200px;
  height: 200px;
  filter: hue-rotate(30deg) brightness(3.2);
  float: left;
}
div + div {
  background: #ff5200;
  -webkit-filter: none;
  filter: none;
}

Answer 1

差异原因：

渲染引擎：Chrome 的 Blink 引擎可能会在 macOS 上以不同的方式处理滤镜。 颜色管理：macOS 颜色配置文件（例如 P3 色域）可能会影响亮度和色调。 硬件加速：GPU 渲染可能会引入变化。 解决方案：

跨平台测试过滤器（使用 BrowserStack 等工具）。 使用 @supports (-webkit-appearance: none) 进行 macOS 特定的调整：

@supports (-webkit-appearance: none) {
.example {
    filter: brightness(1.1) hue-rotate(15deg);
}

} 使用 Chrome 开发工具进行调试。 使用 SVG 过滤器以获得更一致的结果。