Javascript 为什么HTML5画布只在webkit浏览器中留下工件？

我有一些代码，其中我动态地将画布添加到可拖动、可调整大小的div元素。在这里粘贴太多-->

它在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可以正常工作。另外，我认为硬件可能是问题所在，但我已经在多台机器上重新启动/运行了它，并且它是可重复的

---

我是否发现了浏览器错误，或者有人看到了我代码中的错误？

我可以在Mac OS X 10.8.2上的Chrome 25中重复它

我以前也有过这样的问题。画布绘制例程与CSS绘制交互的方式似乎存在缺陷。因为这是一个浏览器错误，所以我发现没有一个很好的方法来修复它。我认为你所能做的就是尝试用一个div覆盖整个背景，当你拖动它来强制重画的时候，它会时不时地闪烁。这并不漂亮，但我从来没有找到更好的方法来做到这一点。

我也有同样的错误（是的，Sebas，我会称之为错误；如果你有一个解决方案而不是仅仅批评，那就更好了）

css中的“overflow:hidden；”是bug的触发器

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

这是您的JSFIDLE的一个叉子，它已被移除

---

我知道这是旧的，我想我会为任何来自搜索的人添加它…

不可重复，Chrome 26.0.1410.33 beta-m和糟糕的硬件配置它在这里也可以正常工作（Chrome 25，Intel Sandybridge）。这可能是由于显卡或类似的问题。这是可重复的，@Sebas。我使用的是Chrome27Dev，也有同样的问题。如果你愿意，我会投你的反对票possible@Markasoftware“不可重复”显然是指“此处不可重复”。我不知道它是否在你的电脑、我的邻居的电脑等中。重要的事实是，我们有证据表明，至少有两个版本的chrome没有受到影响，这对解决问题非常有帮助。我不会对你的评论投反对票，即使我真的觉得它盲目得可笑。@Markasoftware-嘿，如果你们现在完成了，也许你们可以把问题投上一票，我们可以把更多的注意力集中在一个答案上。你怎么知道这是一个浏览器的错误？你怎么知道其他人没有做错什么？这就像说，“哦，internet explorer允许我这样做，所以这是其他浏览器的问题”。除非有正式的bug发布，否则你不能这么说。为此，有一个高效的chrome bug页面：我不是说你错了，我是说小心假设。@Sebas，谢谢你链接到chrome的问题列表；我会研究它，也许会发布错误。此外，我将了解如何获得一个更新的版本，并测试更多。我只在Chrome 25和Windows 7上的webkit中存在工件；我把它标记为一个答案，虽然从技术上讲，它更像是一个解决办法，对吗？：-）我有溢出：隐藏在那里以保持标题半径工作，但我可能会寻找其他解决方案。谢谢你在这里的努力。