由于Chrome中的mix-blend-mode属性导致动画延迟

Question

如果你启动Chrome并在全屏模式下查看我的小提琴，你会发现动画效果很慢。div在向下滑动时会有一点滞后，而文本在向上滑动时会有一点滞后。如果您将浏览器的大小调整为较小，动画将播放得很好。另外，我的动画在Safari中播放得很好。

如果删除包含mix-blend-mode属性的.light-leaks类，动画将正常运行。

有什么问题吗？谢谢。

fiddle

fiddle in fullscreen mode

Answer 1

我必须在动画运行完成后应用mix-blend-mode属性，以避免延迟。我是用javascript实现的。

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

    setTimeout(function() {

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

     }, 7000);