I have some code where I add a canvas on the fly to a draggable, resizable div element. Its too much to paste here -->here is the jsFiddle...

It works fine in IE-10 and FF-19, but in webkit (Chrome-25) there are severe artifacts that get left behind when you drag the div AFTER doing a resize. Here is the test to run:

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.

The test case I constructed seems to point to the canvas being the culprit. I don't see this as a coding error since non-webkit works OK. Also, I thought maybe hardware was the issue but I have rebooted / run this on multiple machines and it is repeatable.

This IS repeatable, @Sebas. I am using chrome 27 dev and have the same problem. I would downvote your comments if possible
–
MarkasoftwareMar 16 '13 at 1:20

@Markasoftware, "not repeatable" means "not repeatable here", obviously. I don't know whether it is or not in your computer, my neighbourg's, etc. The important fact is that we have the evidence that at least 2 versions of chrome are not affected, which is extremly helpful to separate the problem. I would not downvote your comment though even if I really find it ridiculously blind.
–
SebasMar 16 '13 at 12:41

@Markasoftware - hey if you guys are done now, maybe you could upvote the question and we can get some more attention focused on an answer.
–
Geek StocksMar 16 '13 at 17:36

Excellent post; I am marking it as an answer, although technically its more like a workaround, right? :-) I have the overflow:hidden there to keep the header radius working, but I will look to other solutions for that perhaps. Thanks for your efforts here.
–
Geek StocksJul 9 '13 at 4:12

I've had problems with this before also. There seem to be bugs with the way the canvas drawing routines interact with CSS drawing. As it's a browser bug there isn't a nice way to fix this that I've found. I think all you can do is try hacks like cover the entire background with a div that you flash on and off when dragging to force a redraw. It's not pretty, but I've never found a nicer way to do this.

how do you know it is a browser's bug? How do you know all others are not doing something wrong? It's like saying, "oh, internet explorer allows me to do this hence it's a problem of the other browsers". You just can't say that unless there's an official bug release. And for this, there's the efficient chrome bug page: code.google.com/p/chromium/issues/list I'm not saying you're wrong, I'm saying take care with assumptions.
–
SebasMar 16 '13 at 12:46

@Sebas, thanks for the link to Chrome's issues list; I'll research it and maybe post the bug. Also, I'll see about getting a newer version and test some more.
–
Geek StocksMar 16 '13 at 17:38