混合混合模式：在 Firefox 中增加错误答案

【问题标题】：Mix-blend-mode: Multiply Bug in Firefox混合混合模式：在 Firefox 中增加错误
【发布时间】：2015-07-06 17:06:44
【问题描述】：

我正在尝试在 Firefox 中实现混合混合模式，这似乎是受支持的，但在使用“乘法”时我只会得到黑色元素。有谁知道为什么会这样？如何解决？

这里是 Codepen 中重新创建的问题的链接：http://codepen.io/anater/pen/xGWddq

.circle-red,
.circle-blue{
  position: absolute;
  width: 100px;
  height: 100px;
  border-radius: 100%;
  mix-blend-mode: multiply;
}

.circle-red{
  background: red;
  top: 50%;
  left: 50%;
  transform: translate(-75%, -50%);
}

.circle-blue{
  background: blue;
  top: 50%;
  left: 50%;
  transform: translate(-25%, -50%);
}

这在 Chrome 或 Safari 中不会发生，它与 Firefox 是隔离的。

【问题讨论】：

是的，它对我也不起作用，但奇怪的是，当我使用 BrowserShots 生成屏幕截图时，它在 Mac 或 PC 上的 FF 37 中正确显示：browserstack.com/screenshots/…

标签： html css firefox

【解决方案1】：

但是红色和蓝色相乘时的正确结果是黑色

为了测试它，最好设置不同的颜色，例如青色和黄色

.circle-red,
.circle-blue{
  position: absolute;
  width: 100px;
  height: 100px;
  border-radius: 100%;
  mix-blend-mode: multiply;
}

.circle-red{
  background: rgb(255, 255, 0);
  top: 50%;
  left: 50%;
  transform: translate(-75%, -50%);
}

.circle-blue{
  background: rgb(0, 255, 255);
  top: 50%;
  left: 50%;
  transform: translate(-25%, -50%);
}

<div class="circle-red"></div>
<div class="circle-blue"></div>

我无法再对其进行测试，但在以前版本的 Firefox 中，存在涉及混合混合模式和基本元素（在本例中为主体）缺少背景颜色的问题。

你能不能试着设置一下

body {
    background-color: white;
}

【讨论】：

我认为问题在于它将两个圆圈完全显示为黑色，而不仅仅是它们重叠的地方......
@ChrisFletcher 我使用的是 FF 37.0.2，我认为没问题（交叉点黑色，其余扇区为红色和蓝色）
@ChrisFletcher 添加了有关问题可能来源的注释（未经测试）
我在 Firefox 中看到它是黑色的，两个元素都

【解决方案2】：

我遇到了类似的问题，这为我解决了：使用 rgba 设置颜色（相乘），“a”值为 0.99，而不是纯 rgb。

【讨论】：

真的没想到它会起作用，但它确实像您期望的那样工作。上面接受的答案在 Firefox 41.0.1 中以黑色的两个圆圈结束。

【解决方案3】：

这似乎是由于 FF for Mac 中的一个错误：

https://bugzilla.mozilla.org/show_bug.cgi?id=1135271

对我有用的解决方案（使用矩形 DIV）是对 div 应用透明轮廓！

见：

https://medium.com/@maykelesser/how-to-fix-osx-firefox-mix-blend-mode-bug-6b3548e9e546

Paule_D 的回答在

【讨论】：

【解决方案4】：

尝试在 Firefox 中禁用硬件加速（选项>高级>在可用时使用硬件加速关闭）

【讨论】：

这与错误没有任何关系。