火狐混合模式错误

Question

我目前需要使用混合混合模式的一个项目，以乘一个图像上的黄色div。它在铬中工作，没有任何问题，但是在firefox中，当容器的宽度和高度与图像相同时，图像就会变黑。

如果图像高出1/4，那么无论如何它都会运行。有人知道为什么会这样吗？

下面是我的代码示例。在firefox中试一试，并使用高度值。当你把高度设为500 to时，它会变黑。

谢谢你们的帮助！

http://cssdeck.com/labs/t2uxoktu

​

.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>

​

Answer 1

我知道这是个老问题，但我偶然发现了答案。使用混合模式将此CSS添加到元素中。

transform: translateZ(0);

Answer 2

我发现您需要设置图片后面的背景色和div，以便Firefox能够正确地呈现。因此，如果您的图像只占用了混合混合模式集的div的一部分，则包含或位于div其余部分的背景div需要一个颜色集才能进行计算。在设置背景颜色之前，我看到了部分黑色的div。

尽管如此，您的示例在Firefox 41中似乎与现在一样有效。