Firefox 混合混合模式错误答案

【问题标题】：Firefox mix-blend-mode bugFirefox 混合混合模式错误
【发布时间】：2015-06-03 08:09:05
【问题描述】：

我目前需要对项目使用混合混合模式来在黄色 div 上乘以图像。它在chrome中运行没有任何问题，但在firefox中，当容器与图像具有相同的宽度和高度时，图像会变黑。

如果图像高 1 像素，它仍然会运行。有人知道为什么会这样吗？

这是我的代码示例。在 Firefox 中尝试并使用高度值。当您将高度设置为 500 像素时，它会变黑。

感谢大家的帮助！

.image {
  background: #ffff00;
  display: block;
  width: 500px;
  height: 505px;
}
.image img {
  mix-blend-mode: multiply;
}

<div class="image">
  <img src="http://unsplash.it/500/500">
</div>

【问题讨论】：

如果图像高 1px，它仍然会运行-您能详细说明一下吗？您还可以在您的问题中包含 cssdeck sn-p 的代码吗？包含代码 sn-p 的可能性非常好。
@nicoO 谢谢，我添加了代码。
感谢您的反应。我在代码 sn-p 中应用了您的代码。如果你不喜欢这个，我会回滚这个编辑。另外：将 div 设置为height: 500px 时，我无法重现任何问题。您能否在 Firefox 中的问题在您身边可见的地方附加另一个片段？

标签： css firefox

【解决方案1】：

我知道这是一个较老的问题，但我遇到了它并找到了解决方案。将此 CSS 添加到具有混合模式的元素中。

transform: translateZ(0);

【讨论】：

【解决方案2】：

我发现您需要在图像和 div 后面设置背景颜色才能使 Firefox 正确呈现。因此，如果您的图像仅占据设置了 mix-blend-mode 的 div 的一部分，则包含或位于 div 其余部分后面的背景 div 需要设置颜色才能进行计算。在设置背景颜色之前，我看到了部分黑色的 div。

话虽如此，您的示例似乎现在可以在 Firefox 41 中运行。

【讨论】：