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

Question

如果您启动 Chrome 并在全屏模式下查看我的 fiddle ，您会发现动画很慢。 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);