为什么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浏览器中留下工件？

回答

相关问题