CSS: mix-blend-mode makes transform not work anymore (Chrome, Firefox)

Question

Seems like mix-blend-mode: multiply makes any transform not work anymore. This happens in Chrome and Firefox, while on Safari it works. (All updated to the last version)

In this fiddle you can see the behaviour: fiddle (Sorry if it's a bit messy, I'm not a developer)

The first image is without the multiply class, while the second is with it.

.inner {
  -webkit-transform: translateZ(30px);
  transform: translateZ(30px);
}

.innerUp {
  -webkit-transform: translateZ(100px);
  transform: translateZ(100px);
}

.multiply {
  mix-blend-mode: multiply;
}

I've found some discussion on this, but none of them managed to solve the issue.

Thanks!