css - Firefox 混合混合模式错误

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

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

transform: translateZ(0);