CSS 在浏览器中未激活选项卡时未更新?

CSS not updating while not active tab in browser?

我在游戏中使用进度条作为计时器,我将其设置为在 15 秒左右的时间内从 100% 变为 0%。但是,在测试期间,因为我有两个打开的两个选项卡来模拟两个客户端,所以我注意到进度条只会在每个选项卡首次激活后才开始动画。

现在这可能在实际游戏中不会成为问题,因为如果所有客户端正在玩游戏,显然都会被标记,但情况可能并非总是如此,因为有些人在玩游戏时切换到不同的选项卡,我不希望他们的计时器不同步。具体来说,如果我这样做:

$("#progressTimer").css({ 'transition-duration' : "15s" });
$("#progressTimer").css("width", "0%");

这会将其设置为在 15 秒内从当前百分比 (100%) 减少到 0%,但只有在用户第一次使用标签查看它之后才会生效(如果用户使用标签再次退出它同样会冻结,因为当你返回时你可以看到它立即跳转。)因此,如果有人立即加入而另一个人等待 5 秒才能看到它,那么第二个人的计时器将落后 5 秒。

这很可能是出于性能原因而完成的,因为不需要为这样看不见的东西制作动画,但考虑到我的应用程序不是很密集,并且会有这个进度条,我总是喜欢它成为 运行,即使用户没有进入。有什么办法可以禁用这个可能的浏览器功能吗?

如果这是一个重要的计时功能,您可能无论如何都应该使用外部变量来控制它,而不是依赖 CSS 动画。在你的控制循环中的某个地方,你可能想要递减一个定时器变量然后调用 $("#progressTimer").css("width", "#{timer}%");
参见:http://jsfiddle.net/3k4egrtm/

请注意 setTimeout() 也存在您提到的问题。我发现其他人的 fiddle 使用 Date 对象来检查标签失去和获得焦点之间经过了多少时间来克服这个问题:http://jsfiddle.net/qN6eB/

我认为无法禁用该功能 - 只能解决它。