보이지 않는/숨겨진 캔버스가 Chrome에 표시되지 않습니다.

Question

visibility: hidden;으로 스타일이 지정된 캔버스는이 코드로 1 초 후에 창 크기로 표시됩니다. 맞습니까?

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에서는 작동하지만 Chrome3 (Windows7에서 실행)에서는 작동하지 않습니다.
(휴, 내가 IE로하지만 크롬 작동 뭔가를 찾을 수 없을 것입니다 결코 불구하고!)

나는 캔버스를 숨기고 보여 display: none; 및 canvas.style.display= "block";를 사용하여 시도와 같은 동작을 얻었다. 당신이 setTimeout에 의해 트리거 기능 후에 (문서 영역 위로 마우스를 이동 한 후에,라고 나타납니다 크롬, 캔버스 (및 그려진 내용)와 jsfiddle 이상한 http://jsfiddle.net/CX49R/

: 여기

테스트입니다 코스). 그러나 동일한 HTML + CSS + JS 코드가 하나의 Chrome 탭/창에서 실행되는 경우에는 절대 나타나지 않습니다 ("개발 도구"에서 "요소 검사"를 클릭하거나 문서 영역을 클릭하지 않는 한).

무엇이 여기에 있습니까? 나는 원래 시나리오의 최소한으로 코드를 줄이려고했다.

Answer 1

어떻게 든 캔버스 요소와 관련이있는 것 같습니다. 숨겨진 부모 DIV 만들기 대신 캔버스 요소의 문제를 해결하기 위해 보인다 보여주는 : 맥에

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

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

Answer 2

나는 평판이 충분하지 않아 답변을 대신 드리겠습니다. 문제는 setTimeout이 아니며 문제는 canvas.style.visibility = "visible";입니다. 귀하의 제한 시간에 경고를 설정하고 잠시 후 문제가 발생했습니다. 내 생각에 canvas.style.visibility이 마우스 이벤트를 기다리고 기다리는 중입니다.