Question

我有一些代码，我可以动态地将画布添加到可拖动的，可调整大小的div元素中。这里粘贴太多了 - ＆gt; here is the jsFiddle...

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

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

Answer 1

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

“溢出：隐藏;”在你的CSS中是bug的触发器。

#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/

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

Answer 2

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

我之前也遇到过这个问题。画布绘制例程与CSS绘图交互的方式似乎存在缺陷。由于这是一个浏览器错误，我找不到一个很好的解决方法。我认为所有你能做的就是尝试使用一个div来覆盖整个背景，你可以在拖动时快速打开和关闭div以强制重绘。它并不漂亮，但我从来没有找到更好的方法来做到这一点。

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

2 个答案: