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

Question

如果您启动 Chrome 并在全屏模式下检查我的小提琴，您会看到动画滞后。div 向下滑动时滞后一点，文本在向上滑动时滞后一点。如果您将浏览器的大小调整为更小，动画将可以正常播放。我的动画在 Safari 中也能正常播放。

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

问题是什么？谢谢。

全屏模式下的小提琴

Answer 1

我必须mix-blend-mode在动画完成运行后应用该属性以避免滞后。我用javascript做到了。

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

    setTimeout(function() {

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

     }, 7000);