页面上的 3D 转换破坏了混合混合模式

Question

我在摆弄mix-blend-mode 属性。一切正常，直到我在页面上的任何位置添加 transform: perspective(100px) 或任何其他 3d 转换，然后它完全中断。应用了转换，但混合模式消失了。

我在 chrome 和 firefox 以及 linux 和 windows 上进行了测试，它在任何地方都是一样的，但是在另一台计算机上它工作正常（我不记得它有什么版本的 chrome 并且正在运行 ubuntu）。

这是可以通过 CSS 解决的问题，还是可能只是硬件/GPU 驱动程序问题？

我将background-blend-mode 放入标签中，因为mix-blend-mode 标签尚不存在，但奇怪的是，这个属性工作得很好，并且没有被转换破坏。

这是我要实现的目标的代码笔： http://codepen.io/vnenkpet/pen/avWvRg

闪电不应该伴随着黑色背景闪烁，而是应该与页面背景平滑融合。

编辑：

我刚刚发现它确实可以在 Firefox 中使用。因此，这是一个 chrome 错误吗？据我所知，3D 变换不应该破坏混合模式......

Answer 1

我意识到这是一个相当老的线程，但是我在使用 Masonry Isotope 插件在网格部分上使用混合混合模式覆盖的 Webkit/Blink 中遇到了同样的问题直到我将以下 CSS 添加到正在转换的元素中。 即砌体网格元素

我正在回答这个问题，以防将来对某人有所帮助。

[your-selector-goes-here] {
    perspective:1000px;
    -webkit-backface-visibility: visible;
    backface-visibility: visible;
}

Answer 2

您可以尝试也对指定了mix-blend-mode 的元素应用空变换 (3D layer promotion)：

.content {
    mix-blend-mode: difference;
    transform: translate3d(0, 0, 0);
}

这样，Chrome 可以成功地将两个 3D 图层混合在一起，而不是无法混合一个 3D 图层和一个 2D 图层。

这是一个演示问题和解决方案的 sn-p：

function change(event) {
  var content = document.querySelector(".content")
  content.className = event.target.checked ? "content content-with-transform" : "content"
}

.parent {
  text-align: center;
  padding: 2rem;
  font-size: 5rem;
  font-weight: 700;
}

.fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 4rem;
  background-color: #AB1795;
  transform: translate3d(0, 0, 0);
  z-index: -1;
}

.content {
  mix-blend-mode: difference;
  background-color: #167CFB;
}

.content-with-transform {
  transform: translate3d(0, 0, 0);
}

<div class="parent">
  <div class="fixed"></div>
  <div class="content">Content</div>
</div>
<label><input type="checkbox" onchange="change(event)"/> Also transform other element</label>

（我在使用will-change: transform时偶然发现了这个问题，不是实际的转换，但解决方案是一样的。）

Answer 3

我遇到了类似的问题，除了在页面上应用mix-blend-mode（乘以）会使我在页面上的transforms 降低（在 Mac 上使用 Chrome）。我可以通过将z-index 规则应用于mix-blend-mode div 来解决此问题（也不要忘记设置position）。

不过，我不完全确定这是一个错误，还是由于堆栈上下文的属性而导致的预期行为。