Mix-blend-mode is broken into 3D transforms on the page

Question

I was looking for a property mix-blend-mode. Everything works fine until I add something like transform: perspective(100px)or any other 3D transformations anywhere on the page, and then it completely breaks. The conversion is applied, but there is no blending mode.

I tested on chrome and firefox, as well as on linux and windows, and it was the same everywhere, but it worked fine on another computer (I don’t remember which version of chrome it had and ran ubuntu).

Is this something that can be fixed with CSS, or is it just a hardware / GPU problem?

I put background-blend-modein tags because the tag mix-blend-modedoes not exist yet, however this property strangely works perfectly fine and is not interrupted by transformations.

Here is the code of what I'm trying to achieve: http://codepen.io/vnenkpet/pen/avWvRg

Lightning should not have a black background blinking with it, but should blend smoothly with the background of the page.

EDIT:

I just found out that it really works in Firefox. Is this therefore a chrome mistake? As far as I know, 3D Transforms should not interrupt the blending mode ...

Answer 1

, , janky transforms Webkit/Blink, Masonry Isotope CSS . ..

, - .

div {
    perspective: 1000px;
    -webkit-backface-visibility: visible;
    backface-visibility: visible;
}

Answer 2

, , mix-blend-mode () transform ( Chrome Mac). , z-index div mix-blend-mode ( position).

, , - .

Answer 3

( 3D-) , mix-blend-mode :

.content {
    mix-blend-mode: difference;
    transform: translate3d(0, 0, 0);
}

In this way, Chrome can successfully merge two 3D layers together, instead of not mixing a 3D layer and a 2D layer.

Here is a snippet demonstrating the problem and solution:

function change(event) {
  var content = document.querySelector(".content")
  content.className = event.target.checked ? "content content-with-transform" : "content"
}

.parent {
  text-align: center;
  padding: 2rem;
  font-size: 5rem;
  font-weight: 700;
}

.fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 4rem;
  background-color: #AB1795;
  transform: translate3d(0, 0, 0);
  z-index: -1;
}

.content {
  mix-blend-mode: difference;
  background-color: #167CFB;
}

.content-with-transform {
  transform: translate3d(0, 0, 0);
}

<div class="parent">
  <div class="fixed"></div>
  <div class="content">Content</div>
</div>
<label><input type="checkbox" onchange="change(event)"/> Also transform other element</label>

Run codeHide result

(I came across this problem when using will-change: transform, not the actual conversion, but the solution is the same.)