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

Question

我在摆弄这个mix-blend-mode财产。一切正常，直到我transform: perspective(100px)在页面上的任何地方添加类似或任何其他3d转换之类的东西，然后完全中断。应用了转换，但是混合模式消失了。

我在chrome和firefox以及linux和Windows上进行了测试，并且到处都是相同的，但是在另一台计算机上它运行良好（我不记得它拥有并正在运行ubuntu的chrome版本）。

那是可以用CSS修复的东西，还是仅仅是硬件/ GPU驱动程序问题？

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

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

闪电不应带有闪烁的黑色背景，而应与页面背景平滑融合。

编辑：

我刚刚发现它实际上可以在Firefox中运行。因此，这是一个chrome bug吗？据我所知，3D变形不应破坏混合模式...

Answer 1

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

我回答这个问题是为了将来对某人有帮助。

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