【发布时间】：2016-07-06 23:29:01
【问题描述】：
我使用 <canvas> 元素和 2d 上下文创建了一个简单的 Breakout 克隆。
在 Google Chrome 中玩游戏时（版本：49.0.2623.87（64 位））如果我在 Mac OS X 中切换空间（版本：10.11.3） 然后切换回包含 Chrome 的空间，有时，Chrome 画布呈现白色矩形覆盖约 80%，即使在随后的完整画布 clearRect() 上仍然存在并重绘。我发现解决此问题的唯一有保证的方法（无需完全重新加载文档）是切换到 chrome 中的不同选项卡，然后切换回来。最新版本的 Safari 或 Firefox 均不会出现此问题。
我还录制了该问题的截屏视频，最初游戏暂停，我切换到 Mac OS X 中的下一个空间，其中 FireFox 加载了相同的游戏，我切换回使用 Chrome 的空间，一切正常，我玩了一会儿游戏然后再次暂停，然后切换到Mac OS X中的下一个空间，该空间在Firefox中加载了游戏，你可以看到没有任何问题，然后我切换回空间Chrome，在切换回问题时就出现了。然后，我在 Chrome 中创建一个新标签页，并切换回包含闯关游戏的标签页以解决问题。
有没有人曾经经历过和/或知道如何解决它？
谢谢
【问题讨论】：
-
我在使用 Mac 的 chrome 中开发 web 应用程序时遇到了同样的问题。如果我绘制画布，转到另一个选项卡并返回到 webapp 选项卡，那么画布将被清除，无论我尝试做什么，我都不会重新绘制画布。
-
唯一对我有用的是动态删除非工作画布，添加新画布，然后在 window.onfocus 事件中重绘它（相同的 chrome 版本）
-
我也有同样的问题。我已经设法用这种方式修复它 document.addEventListener("visibilitychange", function() { var oldWidth = canvas.width canvas.width = oldWidth + 1 canvas.width = oldWidth // 在此处重绘画布内容 });
标签： javascript html google-chrome canvas