title: Invisible/hidden canvas does not show up in Chrome
body: <p>A canvas styled with <code>visibility: hidden;</code> is supposed to appear window-sized after one second with this code, right?</p>
  
  <pre><code>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);
  </code></pre>
  
  <p>It works with IE11, but not with Chrome32 (running on Windows7).<br>
  <em>(Phew, I never though I would find something that works with IE but not with Chrome!)</em></p>
  
  <p>I tried using <code>display: none;</code> and <code>canvas.style.display= "block";</code> to hide and show the canvas and got the same behavior.</p>
  
  <p>Here is a test: <a href="http://jsfiddle.net/CX49R/" rel="nofollow">http://jsfiddle.net/CX49R/</a></p>
  
  <p>Oddly, in <a href="http://jsfiddle.net/CX49R/" rel="nofollow">jsfiddle</a> with Chrome, the canvas (and its drawn content) appears after you move the mouse over the document area (after the function triggered by <code>setTimeout</code> 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).</p>
  
  <p>What am I missing here? I tried to reduce the code to the minimum of my original scenario.</p>