爲什麼HTML5 canvas僅在webkit瀏覽器中留下工件？

我有一些代碼，我在一個可拖動的，可調整大小的div元素上添加一個畫布。它太多了粘貼在這裏 - >here is the jsFiddle...爲什麼HTML5 canvas僅在webkit瀏覽器中留下工件？

它在IE-10和FF-19中正常工作，但在webkit（Chrome-25）中，當您拖動div後出現嚴重的工件時，調整。這裏是測試運行：

How to see the artifacts in WEBKIT BROWSERS ONLY 
    1. Drag the gray header, shake mouse, notice NO artifacts as you shake the div 
    2. Drop the header, resize div using the lower right handle so that you see about an equal amount of green and purple 
    3. Repeat step 1, only this time artifacts are everywhere in webkit browsers (not IE 10 or FF 19) 
    4. Now delete the javascript code from line 11 on down (the function and call) and run fiddle again 
    5. Repeat the test in steps 1-3. Without the canvas, there are NO artifacts. 
    6. Try in non-webkit browsers. NO artifacts.

我構建的測試用例似乎指向畫布是罪魁禍首。我不認爲這是一個編碼錯誤，因爲非webkit可以正常工作。此外，我認爲可能硬件是問題，但我重新啓動/在多臺機器上運行它，它是可重複的。

我是否發現瀏覽器錯誤，或者有人在我的代碼中看到錯誤？

來源

2013-03-16 Geek Stocks

不可重複，鉻26.0.1410.33的β-m和壞的硬件配置 – Sebas 2013-03-16 00:20:11

它的工作原理這裏也很好（Chromium 25，Intel Sandybridge）。這可能是由於顯卡問題或其他原因。 – 2013-03-16 00:46:40

這是可重複的@Sebas。我使用chrome 27 dev，並且有同樣的問題。如果可能的話，我會降低你的評論 – Markasoftware 2013-03-16 01:20:41

我有同樣的錯誤（是的，Sebas，我會稱之爲錯誤;如果你有一個解決方案，而不是僅僅是一個批評，更好）。

「overflow：hidden;」在你的CSS是錯誤的觸發器。

#wrapper {position: relative; width: 300px; height: 300px; background-color: silver;border: 6px solid lightgray; z-index: 2; border-radius: 15px; overflow: hidden;}

這是你的jsFiddle的一把叉子，它被刪除了。

http://jsfiddle.net/sv9yZ/1/

我知道這是老了，想我會加入這個爲任何人從搜索來了...

來源

2013-05-23 19:47:44 user2415124

優秀的帖子;我將其標記爲答案，儘管技術上它更像是一種解決方法，對嗎？ :-)我有溢出：隱藏在那裏以保持頭部半徑工作，但我會尋找其他解決方案。感謝您在這裏的努力。 – 2013-07-09 04:12:17

我可以在Mac OS X 10.8.2上的Chrome 25中重複使用它。

我以前也遇到過這個問題。 canvas繪製例程與CSS繪圖交互的方式似乎存在一些缺陷。由於這是一個瀏覽器錯誤，因此找不到解決此問題的好方法。我認爲你所能做的就是嘗試使用黑客來覆蓋整個背景，使用一個div，當你拖動強制重畫時你會閃爍。這不太好，但我從來沒有找到更好的方法來做到這一點。

來源

2013-03-16 02:58:07 rpamely

你怎麼知道這是瀏覽器的錯誤？你怎麼知道所有其他人都沒有做錯什麼？這就像說，「哦，Internet Explorer允許我這樣做，因此這是其他瀏覽器的問題」。除非有官方的bug發佈，否則你不能這麼說。爲此，有一個高效的鉻錯誤頁面：https://code.google.com/p/chromium/issues/list我並不是說你錯了，我是在說假設。 – Sebas 2013-03-16 12:46:28

@Sebas，感謝您訪問Chrome問題列表的鏈接;我會研究它，也許發佈bug。此外，我會看到有關獲得更新版本和測試更多。 – 2013-03-16 17:38:41

只有在Chrome 25，Windows 7上纔有webkit中的工件。 – jomido 2013-03-18 17:37:19

爲什麼HTML5 canvas僅在webkit瀏覽器中留下工件？

回答

相關問題