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中运行。这是一个铬虫吗？据我所知，3D变换不应该破坏混合模式......

Answer 1

我意识到这是一个非常古老的线程，但我在Webkit / Blink中使用 Masonry Isotope 插件在网格部分使用混合混合模式叠加层进行janky变换时遇到了同样的问题直到我将以下CSS添加到正在转换的元素中。的即。砌体网格元素

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

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

Answer 2

我遇到了类似的问题，只是在页面上应用mix-blend-mode（倍数）更高的页面会导致页面上的transform更低（使用Mac上的Chrome）。我可以通过将z-index规则应用于mix-blend-mode div来解决此问题（也不要忘记设置position）。

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

Answer 3

您可以尝试也将空转换（3D layer promotion）应用于指定了mix-blend-mode的元素：

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

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

这是一个演示问题和解决方案的片段：

＆＃13;

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

＆＃13;

.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);
}

＆＃13;

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

＆＃13;

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

混合混合模式在页面上通过3D变换打破

3 个答案: