Html 混合模式：Firefox中的多个Bug

我试图在Firefox中实现混合模式，这似乎是受支持的，但我在使用“multiply”时只得到黑色元素。有人知道为什么会这样吗？如何修复它

以下是在Codepen中重新创建的问题的链接：

---

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

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

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

。圈出红色，
.蓝色圆圈{
位置：绝对位置；
宽度：100px；
高度：100px；
边界半径：100%；
混合模式：倍增；
}
.圈红{
背景：rgb（255,255,0）；
最高：50%；
左：50%；
转换：翻译（-75%，-50%）；
}
.蓝色圆圈{
背景：rgb（0，255，255）；
最高：50%；
左：50%；
转换：翻译（-25%，-50%）；
}

---

我有一个类似的问题，这为我解决了：

---

使用“a”值为0.99的rgba（而不是普通rgb）设置颜色（被倍增）

这似乎是由于Mac的FF中存在错误：

一个对我有效的解决方案（使用矩形div）是将透明的轮廓应用于div

见：

---

Paule_D的回答是，尝试在Firefox中禁用硬件加速（选项>高级>关闭时使用硬件加速）

是的，这对我也不起作用，但奇怪的是，当我使用浏览器快照生成屏幕快照时，它在Mac或PC上的FF 37中正确显示：我认为问题在于它显示的两个圆圈都是完全黑色的，而不仅仅是它们重叠的地方…@ChrisFletcher我使用的是FF 37.0.2，我看到了ok（交叉点黑色，剩余扇区红色和蓝色）@ChrisFletcher补充了关于可能的问题来源的说明（未测试）我在firefox中看到了黑色，这两个元素实际上都不希望它起作用，但它的作用正如您所期望的那样。在Firefox 41.0.1中，上面接受的答案以两个黑色圆圈结束。这与bug没有任何关系。

.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%);
}