11

我在摆弄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 变换不应该破坏混合模式......

4

3 回答 3

3

我遇到了类似的问题，除了在页面上应用mix-blend-mode（乘）高点打破了我transform在页面上的低点（在 Mac 上使用 Chrome）。我可以通过z-index对 div 应用规则来解决这个问题mix-blend-mode（也不要忘记设置 a position）。

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

于 2017-11-14T14:06:12.030 回答
3

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

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

[your-selector-goes-here] {
    perspective:1000px;
    -webkit-backface-visibility: visible;
    backface-visibility: visible;
}
于 2016-08-23T19:02:04.193 回答
3

您还可以尝试对已指定的元素应用空变换（3D 图层提升）：mix-blend-mode

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

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

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

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，而不是实际的变换，但解决方案是一样的。）

于 2018-02-08T02:44:00.637 回答