Animation lag due to mix-blend-mode property in Chrome

Question

If you launch Chrome and check my fiddle in fullscreen mode, you'll see that the animations are laggy. The div lags a little while sliding down and the text lags a little while sliding up. If you resize the browser to be smaller the animations will play fine. Also my animations play fine in Safari.

If you delete the .light-leaks class that contains the mix-blend-mode property, the animations will run fine.

What is the problem? Thanks.

fiddle
fiddle in fullscreen mode

Answer 1

I had to apply the mix-blend-mode property after the animations were done running too avoid the lag. I did it with javascript.

$(".light-leaks").hide();

    setTimeout(function() {

        $(".light-leaks").fadeIn(2500);

     }, 7000);