我在摆弄 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 变换不应该破坏混合模式...
最佳答案
我遇到了类似的问题，除了在页面上应用 mix-blend-mode(乘法)破坏了我在页面上较低的 transform(使用Mac 上的 Chrome)。我能够通过将 z-index 规则应用于 mix-blend-mode div 来解决这个问题(不要忘记设置 position，也是)。
不过，我不完全确定这是错误还是由于堆叠上下文的属性而导致的预期行为。
关于css - mix-blend-mode 被页面上的 3D 转换破坏，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32932966/