MacOS版Chrome对CSS filter的brightness与hue-rotate属性处理异常

背景说明 #

我将图片和图标存储为纯红色，允许站点管理员通过调整hue-rotate和brightness属性来控制配色方案/主题。

问题描述 #

MacOS版Chrome中CSS filter属性的渲染结果与其他浏览器差异极大。

测试代码 #

CSS代码 #

div {
  background: #ff0000;
  width: 100px;
  height: 100px;
  margin: 10px;
  filter: hue-rotate(30deg) brightness(3.2);
  float: left;
}
div + div {
  background: #ff5200;
  -webkit-filter: none;
  filter: none;
}

HTML代码 #

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

预期与实际表现 #

两个<div>元素本该显示为同一颜色，除MacOS版Chrome外的所有浏览器均符合预期，但在MacOS版Chrome中，添加滤镜的div显示为#ffe400。

团队中多名MacOS用户均可复现该问题，我使用Windows系统无法直接测试，且在BrowserStack中测试时未出现该问题。

内容的提问来源于stack exchange，提问作者Myles Duncan-King