Invisible/hidden canvas does not show up in Chrome

Question

A canvas styled with visibility: hidden; is supposed to appear window-sized after one second with this code, right?

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);

It works with IE11, but not with Chrome32 (running on Windows7).
(Phew, I never though I would find something that works with IE but not with Chrome!)

I tried using display: none; and canvas.style.display= "block"; to hide and show the canvas and got the same behavior.

Here is a test: http://jsfiddle.net/CX49R/

Oddly, in jsfiddle with Chrome, the canvas (and its drawn content) appears after you move the mouse over the document area (after the function triggered by setTimeout is called, of course). But it never appears if the same HTML+CSS+JS code runs in a single Chrome tab/window (unless you open "Development tools" through "Inspect element", or click on the document area).

What am I missing here? I tried to reduce the code to the minimum of my original scenario.

Answer 1

It seems like it's somehow related to the canvas element. Creating a hidden parent div and showing that instead of the canvas element seems to solve the issue:

http://jsfiddle.net/CX49R/2/

<div id="wrapper">
   <canvas id="myCanvas">Your browser does not support canvas.</canvas>
</div>