mix-blend-mode is broken by 3D transformations on page

Question

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.

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).

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

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.

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.

EDIT:

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...

Answer 1

I realise this is a pretty old thread, but I was having the same issue with janky transforms in Webkit/Blink using the Masonry Isotope plugin with a mix-blend-mode overlay on the grid sections until I added the following CSS to the element that was being transformed. i.e. the masonry grid element

I'm answering this in case it helps someone in future.

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