混合混合模式被第3页的3D转换破坏了 [英] mix-blend-mode is broken by 3D transformations on page

问题描述

我对mix-blend-mode属性不满意.一切正常，直到我在页面上的任何地方添加transform: perspective(100px)之类的东西或任何其他3d转换，然后它完全中断.应用了转换，但是混合模式消失了.

I was fiddling with the mix-blend-mode property. Everything works fine until I add something like transform: perspective(100px) or any other 3d transformation anywhere on the page, then it breaks completely. The transformation is applied but the blend mode is gone.

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

I tested on chrome and firefox and on linux and windows and it's the same everywhere, however on a different computer it worked fine (I don't remember what version of chrome it had and was running ubuntu).

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

Is that something that can be fixed with CSS or is it possibly just a hardware / GPU drivers issue?

我将background-blend-mode放入了标记中，因为mix-blend-mode标记尚不存在，但是奇怪的是，该属性完全可以正常工作，并且不会被转换破坏.

I put background-blend-mode in tags because the mix-blend-mode tag doesn't exist yet, however this property strangely works completely fine and isn't broken by transformations.

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

Here is a codepen of what I am trying to achieve: http://codepen.io/vnenkpet/pen/avWvRg

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

The lightning shouldn't have it's black background flashing with it but should be blended smoothly with the page background.

我刚刚发现它确实可以在Firefox中运行.因此，这是一个镀铬漏洞吗?据我所知，3D变换不应破坏混合模式...

I have just found out that it actually DOES work in Firefox. Is this therefore a chrome bug? 3D Transforms shouldn't break blend mode as far as I know...

推荐答案

我遇到了类似的问题，除了在页面上应用mix-blend-mode(相乘)较高会破坏我在页面上的transform较低(使用Mac上的Chrome).我可以通过对mix-blend-mode div应用z-index规则来解决此问题(也不要忘记设置position).

I was having a similar issue, except that applying a mix-blend-mode (multiply) higher on the page broke my transforms lower on the page (using Chrome on Mac). I was able to fix this by applying a z-index rule to the mix-blend-mode div (don't forget to set a position, too).

但是，由于堆栈上下文的属性，我不确定这是一个错误还是预期的行为.

I'm not entirely sure if this is a bug or if it is expected behavior due to the properties of stacking contexts, though.

这篇关于混合混合模式被第3页的3D转换破坏了的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！