隱形/隱藏畫布不會在Chrome中顯示

用visibility: hidden;設計的畫布應該在一秒鐘後出現窗口大小，對吧？隱形/隱藏畫布不會在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";隱藏和顯示畫布，得到了相同的行爲。

下面是測試：http://jsfiddle.net/CX49R/

奇怪的是，在jsfiddle使用Chrome，畫布（和它繪製的內容）出現你移動鼠標後，在文檔區域（由setTimeout觸發的功能後調用的，課程）。但是，如果相同的HTML + CSS + JS代碼在單個Chrome選項卡/窗口中運行（除非您通過「檢查元素」打開「開發工具」，或者單擊文檔區域），它永遠不會出現。

我在這裏錯過了什麼？我試圖將代碼減少到最初的情況。

來源

2014-02-05 ericbn

在Mac上，在鍍鉻它工作正常。也許嘗試z-index：-1，然後在第二秒後將其更改爲0 – Huangism

你沒有做錯什麼，它絕對是Chrome的代表。雖然[jsfiddle]（http://jsfiddle.net/CX49R/1/）使用顯示而不是可見性，但對我來說確實解決了問題。 – Strille

@Strille，它在jsfiddle之外並沒有爲我工作，也沒有使用jQuery。它適用於Windows7上的jQuery，但不適用於運行在我的Nexus 4/Android 4.4.2 – ericbn

它似乎是某種程度上與canvas元素相關的。創建一個隱藏的父DIV和展示，而不是canvas元素，這似乎解決了這個問題：

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

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

來源

2014-02-05 20:48:52 Strille

即使在運行Nexus 4/Android 4.4.2的Chrome中也能正常運行。甚至沒有jQuery（是的，_THE_ jQuery）可以使我的原始解決方案在那裏工作。 – ericbn

我沒有足夠的評論聲望，所以我會給你一個答案。問題不在於setTimeout，問題在於canvas.style.visibility = "visible";。我在你的超時時間設置了一個警報，並在一秒鐘後解僱，沒問題。我唯一的猜測是，canvas.style.visibility正在等待鼠標事件觸發自己。

來源

2014-02-05 20:14:11 maggiekh

是的，看起來就是這個問題！所以我們發現了一個錯誤？ :-) – ericbn

檢查問題庫的文檔。它可能是一個「意圖」的錯誤，其中的行動本身的目的，所以它不會以這種方式工作。 Strille有一個解決方法。 – maggiekh

隱形/隱藏畫布不會在Chrome中顯示

回答

相關問題