Javascript 不可见/隐藏画布不会显示在Chrome中

样式为

可见性的画布：隐藏应该在一秒钟后用此代码显示窗口大小，对吗

var canvas = document.getElementById("myCanvas");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
// draw on canvas.getContext("2d") ...
window.setTimeout(function() {
  canvas.style.visibility = "visible";
}, 1000);

它适用于IE11，但不适用于Chrome32（在Windows7上运行）。

（呸，我从来没想过我会找到一款与IE兼容但与Chrome不兼容的产品！）

我尝试使用
display:none
和
canvas.style.display=“block”隐藏和显示画布，并获得相同的行为

下面是一个测试：

奇怪的是，在Chrome中，当您将鼠标移到文档区域后（当然是调用了由
setTimeout
触发的函数后），画布（及其绘制的内容）就会出现。但是，如果相同的HTML+CSS+JS代码在一个Chrome选项卡/窗口中运行，则永远不会出现（除非您通过“Inspect element”打开“Development tools”，或单击文档区域）

我错过了什么？我试图将代码减少到我最初的场景的最小值。
我没有足够的声誉来评论，所以我会给你一个答案。问题不是setTimeout，而是canvas.style.visibility=“visible”。我在你的超时设置了一个警报，它在一秒钟后启动，没问题。我唯一的猜测是，
canvas.style.visibility
正在等待鼠标事件自动触发。
它似乎与canvas元素有某种关联。创建一个隐藏的父div并显示它而不是canvas元素似乎解决了这个问题：



您的浏览器不支持画布。
在mac电脑上，在chrome上，它可以正常工作。也许试试z-index:-1，然后在一秒钟后将其更改为0。你没有做错任何事情，这肯定是Chrome出了问题。不过，使用显示而不是可见性确实解决了这个问题。@Strille，在JSFIDLE之外，如果不使用jQuery，它对我不起作用。它可以在Windows7上使用jQuery，但不能在我的Nexus4/Android 4.4中运行的Chrome上使用。2@Huangism，也只是尝试了
z-index
。同样的事情，什么也没发生。似乎有什么东西阻止了Chrome刷新屏幕。是的，看起来这就是问题所在！所以我们发现了一只虫子？！：-）检查文档中的问题库。它可能是一个“有意”的bug，操作本身就是有意的，所以它不会以这种方式工作。Strille有一个解决办法，它甚至可以在运行Nexus4/Android 4.4.2的Chrome中工作。甚至jQuery（是的，jQuery）也不能使我的原始解决方案在那里工作。
<div id="wrapper">
   <canvas id="myCanvas">Your browser does not support canvas.</canvas>
</div>