Firefox mix-blend-mode bug

Question

我目前需要在项目中使用mix-blend-mode来将图像乘以黄色div。它在chrome中没有任何问题，但在firefox中，当容器具有与图像相同的宽度和高度时，图像将变黑。

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

这是我的代码示例。在firefox中试一试并使用高度值。将高度设置为500px时，它会变黑。

感谢您的帮助！

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

我发现您需要在图像后面设置背景颜色，然后让Firefox正确渲染。因此，如果您的图像仅占用具有混合混合模式集的div的一部分，则包含或者在div的其余部分后面的背景div需要一个颜色集以使计算起作用。在设置背景颜色之前，我看到了部分黑色div。

所有这一切，你的例子似乎就像现在一样在Firefox 41中运行。

Answer 2

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

ng-model