Css 混合模式被页面上的3D变换打破

我在摆弄

混合模式

属性。一切正常，直到我在页面上的任何地方添加类似于

transform:perspective（100px）

或任何其他3d转换的东西，然后它就完全崩溃了。已应用变换，但混合模式已消失

我在chrome和firefox以及linux和windows上进行了测试，结果都是一样的，但是在不同的计算机上运行的很好（我不记得它是什么版本的chrome，运行的是ubuntu）

这是CSS可以解决的问题，还是仅仅是硬件/GPU驱动程序的问题

我将

background-blend-mode

放在标记中，因为

mix-blend-mode

标记还不存在，但是奇怪的是，这个属性工作得非常好，并且没有被转换破坏

以下是我试图实现的目标的代码笔：

闪电不应该有它的黑色背景闪烁，但应该与页面背景平滑混合

编辑：

---

我刚刚发现它在Firefox中确实有效。因此这是一个chrome bug吗？据我所知，3D变换不应该破坏混合模式…

我意识到这是一条非常古老的线索，但是我在Webkit/Blink中使用砖石同位素插件进行janky转换时遇到了同样的问题，该插件在网格部分具有混合模式覆盖，直到我将以下CSS添加到正在转换的元素中即砌体网格元素

我回答这个问题是为了将来能帮助别人

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

---

我有一个类似的问题，除了在页面上应用

混合模式（multiply）会破坏页面上较低的
转换（在Mac上使用Chrome）。我可以通过将
z-index
规则应用于
mix-blend模式
div来解决这个问题（也不要忘记设置
位置
）

但是，我不能完全确定这是一个bug还是由于堆叠上下文的属性而导致的预期行为。
您可以尝试也对指定了
混合模式的元素应用空转换（）：

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

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

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


功能更改（事件）{
var content=document.querySelector（“.content”）
content.className=event.target.checked？“带有转换的内容”：“内容”
}
.parent{
文本对齐：居中；
填充：2rem；
字体大小：5rem；
字号：700；
}
.固定{
位置：固定；
排名：0；
左：0；
右：0；
身高：4rem；
背景色：#AB1795；
变换：translate3d（0,0,0）；
z指数：-1；
}
.内容{
混合模式：差异化；
背景色：#167CFB；
}
.心满意足{
变换：translate3d（0,0,0）；
}

内容
同时变换其他元素
这是我在chrome 74中的解决方案，因为在启用translate3d transform时，混合混合模式不工作也存在类似问题。