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

Question

我有一些代码,我在飞行中添加一个画布到一个可拖动的,可重新调整大小的div元素.它太贴了 - > 这里是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

我有同样的错误(是的塞巴斯,我会称之为一个错误;如果你有一个解决方案而不仅仅是批评,那就更好了).

"溢出:隐藏;" 在你的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/

我知道这是旧的,我想我会为搜索到的任何人添加这个...