4

我有一些代码，我在其中将画布动态添加到可拖动、可调整大小的 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 可以正常工作。另外，我认为可能是硬件问题，但我已经在多台机器上重新启动/运行它并且它是可重复的。

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

4

2 回答 2

6

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

“溢出：隐藏；” 在您的 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-23T19:47:44.043 回答
0

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

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

于 2013-03-16T02:58:07.980 回答