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

最佳答案 我有一个类似的问题,除了在页面上应用混合混合模式(乘法)更高的页面上我的变换更低(使用Mac上的Chrome).我能够通过将z-index规则应用于mix-blend-mode div来解决这个问题(也不要忘记设置位置).

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