Question

我不知道什么是错的，但我遇到的每个错误都与Safari有关，而且非常烦人。我的网站上有一个代码，当用户鼠标不在页面主体上时，如在另一个选项卡中或者在页面上不在身体上，圆圈动画会暂停，当用户鼠标再次返回到主体上时，css动画将恢复它停止了。它在Chrome，Firefox上完美运行....但是在Safari上......当你离开身体时，它会弹出这个蓝色背景，当你返回它时会疯狂并立即启动所有颜色。有时它甚至不会在完成后开始，你必须刷新。这是我录制的GIF。

当蓝色背景出现时：

https://gyazo.com/1d063cb8ccce17481df858330b5c8a80

当所有颜色立刻开始时：

https://gyazo.com/9b77fe0746c34aeae73af970aec9e75b

它看起来如何看待

https://gyazo.com/cdcebb77327b166d0995b2598938e6d7

这是我的代码。

代码笔 https://codepen.io/anon/pen/dWvwKR

Java脚本

$("body").on("mouseleave",function(){
                    console.log("MOUSE IS OUT");
                    $("#firstCircle").css({"animation-play-state":"paused"});
                    $("#firstCircle").css({"-webkit-animation-play-state":"paused"});
                    $("#firstCircle").css({"-ms-animation-play-state":"paused"});
                    $("#firstCircle").css({"-moz-animation-play-state":"paused"});
                    $("#firstCircle").css({"-o-animation-play-state":"paused"});

                    $("#secondCircle").css({"animation-play-state":"paused"});
                    $("#secondCircle").css({"-webkit-animation-play-state":"paused"});
                    $("#secondCircle").css({"-ms-animation-play-state":"paused"});
                    $("#secondCircle").css({"-o-animation-play-state":"paused"});
                    $("#secondCircle").css({"-moz-animation-play-state":"paused"});

                    $("#thirdCircle").css({"animation-play-state":"paused"});
                    $("#thirdCircle").css({"-webkit-animation-play-state":"paused"});
                    $("#thirdCircle").css({"-ms-animation-play-state":"paused"});
                    $("#thirdCircle").css({"-moz-animation-play-state":"paused"});
                    $("#thirdCircle").css({"-o-animation-play-state":"paused"});

                    $("#fourthCircle").css({"animation-play-state":"paused"});
                    $("#fourthCircle").css({"-webkit-animation-play-state":"paused"});
                    $("#fourthCircle").css({"-moz-animation-play-state":"paused"});
                    $("#fourthCircle").css({"-o-animation-play-state":"paused"});
                    $("#fourthCircle").css({"-ms-animation-play-state":"paused"});

                    $("#fifthCircle").css({"animation-play-state":"paused"});
                    $("#fifthCircle").css({"-webkit-animation-play-state":"paused"});
                    $("#fifthCircle").css({"-ms-animation-play-state":"paused"});
                    $("#fifthCircle").css({"-moz-animation-play-state":"paused"});
                    $("#fifthCircle").css({"-o-animation-play-state":"paused"});

                    $("#sixthCircle").css({"animation-play-state":"paused"});
                    $("#sixthCircle").css({"-webkit-animation-play-state":"paused"});
                    $("#sixthCircle").css({"-o-animation-play-state":"paused"});
                    $("#sixthCircle").css({"-moz-animation-play-state":"paused"});
                    $("#sixthCircle").css({"-ms-animation-play-state":"paused"});
                    });


                    $(window).on("mouseenter",function(){
                    console.log("MOUSE IS IN");
                    $("#firstCircle").css({"animation-play-state":"running"});
                    $("#firstCircle").css({"-webkit-animation-play-state":"running"});
                    $("#firstCircle").css({"-ms-animation-play-state":"running"});
                    $("#firstCircle").css({"-moz-animation-play-state":"running"});
                    $("#firstCircle").css({"-o-animation-play-state":"running"});

                    $("#secondCircle").css({"animation-play-state":"running"});
                    $("#secondCircle").css({"-webkit-animation-play-state":"running"});
                    $("#secondCircle").css({"-ms-animation-play-state":"running"});
                    $("#secondCircle").css({"-moz-animation-play-state":"running"});
                    $("#secondCircle").css({"-o-animation-play-state":"running"});

                    $("#thirdCircle").css({"animation-play-state":"running"});
                    $("#thirdCircle").css({"-webkit-animation-play-state":"running"});
                    $("#thirdCircle").css({"-ms-animation-play-state":"running"});
                    $("#thirdCircle").css({"-moz-animation-play-state":"running"});
                    $("#thirdCircle").css({"-o-animation-play-state":"running"});

                    $("#fourthCircle").css({"animation-play-state":"running"});
                    $("#fourthCircle").css({"-webkit-animation-play-state":"running"});
                    $("#fourthCircle").css({"-ms-animation-play-state":"running"});
                    $("#fourthCircle").css({"-moz-animation-play-state":"running"});
                    $("#fourthCircle").css({"-o-animation-play-state":"running"});

                    $("#fifthCircle").css({"animation-play-state":"running"});
                    $("#fifthCircle").css({"-webkit-animation-play-state":"running"});
                    $("#fifthCircle").css({"-ms-animation-play-state":"running"});
                    $("#fifthCircle").css({"-moz-animation-play-state":"running"});
                    $("#fifthCircle").css({"-o-animation-play-state":"running"});

                    $("#sixthCircle").css({"animation-play-state":"running"});
                    $("#sixthCircle").css({"-webkit-animation-play-state":"running"});
                    $("#sixthCircle").css({"-ms-animation-play-state":"running"});
                    $("#sixthCircle").css({"-moz-animation-play-state":"running"});
                    $("#sixthCircle").css({"-o-animation-play-state":"running"});
                    });


            });

Answer 1

嗨@ thatoneguy90，因为Safari在1000ms（1s）后暂停非活动标签上的JS以保留CPU。您需要解决setInterval和requestAnimationFrame的自动暂停问题。当您在视口外滚动时，这也可能导致蓝色。

绝对访问这个以获取如何使其工作的JS示例：
How can I make setInterval also work when a tab is inactive in Chrome?

您可能还会发现这有助于获取有关该主题的更多信息：
How do browsers pause/change Javascript when tab or window is not active?

此外，如果这接近最终结果，您也可以使用CSS实现此目的。

动画播放状态不适用于Safari

1 个答案: