transform3d destroys effect with mix-blend-mode

Question

I created an effect with mix-blend-mode, which changes the text color from black to white when it moves in and outside of an image. But when I try to add an transform3d the effect disappears. How can I fix this?

https://codepen.io/faragos/pen/QWJVwmr

to see the effect the line

  transform: translate3d(0px, 0px, 0px);

needs to be commented out.

I would expect transform should have no effect.

Answer 1

I had the same issue today and the method that worked in my case was to move the mix-blend-mode higher up to the same level as the transform.