javascript - 动画播放状态在 Safari 上不起作用
<p><p>我不知道出了什么问题，但我遇到的每个错误都与 Safari 相关，而且非常烦人。我在我的网站上有一个代码，当用户鼠标不在页面主体上时，例如在另一个选项卡中或物理上不在页面上，圆形动画暂停，当用户鼠标再次返回主体时，css 动画恢复它停止的地方。它在 Chrome、Firefox 上完美运行......但在 Safari 上......它有蓝色背景，当你离开 body 时会弹出，当你返回时它会变得疯狂并立即开始所有颜色。有时它甚至不会在完成后启动，您必须刷新。这是我录制的 GIF。</p>
<p>当蓝色背景出现时:</p>
<pre><code>https://gyazo.com/1d063cb8ccce17481df858330b5c8a80
</code></pre>
<p>当所有颜色同时开始时:</p>
<pre><code>https://gyazo.com/9b77fe0746c34aeae73af970aec9e75b
</code></pre>
<p>它的样子</p>
<pre><code>https://gyazo.com/cdcebb77327b166d0995b2598938e6d7
</code></pre>
<p>这是我的代码。</p>
<p>代码笔
<a href="https://codepen.io/anon/pen/dWvwKR" rel="noreferrer noopener nofollow">https://codepen.io/anon/pen/dWvwKR</a> </p>
<p>Java 脚本</p>
<pre><code>$("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"});
});
});
</code></pre></p>
<br><hr><h1><strong>Best Answer-推荐答案</ strong></h1><br>
<p><p>您好@thatoneguy90，这是因为 Safari 会在 1000 毫秒(1 秒)后暂停非事件选项卡上的 JS 以保留 CPU。您需要解决 <code>setInterval</code> 和 <code>requestAnimationFrame</code> 的自动暂停问题。当您在视口(viewport)外滚动时，这也可能导致蓝色。</p>
<p>一定要访问这个以获取有关如何使其工作的 JS 示例:
<br/> <a href="https://stackoverflow.com/questions/5927284/how-can-i-make-setinterval-also-work-when-a-tab-is-inactive-in-chrome" rel="noreferrer noopener nofollow">How can I make setInterval also work when a tab is inactive in Chrome?</a> </p>
<p>您可能还会发现这有助于了解有关该主题的更多信息:
<br/> <a href="https://stackoverflow.com/questions/15871942/how-do-browsers-pause-change-javascript-when-tab-or-window-is-not-active" rel="noreferrer noopener nofollow">How do browsers pause/change Javascript when tab or window is not active?</a> </p>
<p>此外，如果这接近最终结果，您也可以使用 CSS 来实现。</p></p>
<p style="font-size: 20px;">关于javascript - 动画播放状态在 Safari 上不起作用，我们在Stack Overflow上找到一个类似的问题：
<a href="https://stackoverflow.com/questions/43691545/" rel="noreferrer noopener nofollow" style="color: red;">
https://stackoverflow.com/questions/43691545/
</a>
</p>
页:
[1]