CODEWITHSUNDEEP
javascripthtmljquery-uicanvaswebkit
Geek Stocks
Geek Stocks

Reputation: 2030

Why is HTML5 canvas leaving artifacts only in webkit browsers?

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.

Have I found a browser bug, or does someone see an error in my code?

Upvotes: 4

Views: 2371

Answers (2)

user2415124
user2415124

Reputation: 76

I had the same bug (and yes Sebas, I would call this a bug; better if you had a solution instead of just a critique).

The "overflow: hidden;" in your css is the trigger for the bug.

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

Here is a fork of your jsFiddle with it removed.

http://jsfiddle.net/sv9yZ/1/

I know this is old, figured I'd add this for anybody coming from a search...

Upvotes: 6

rpamely
rpamely

Reputation: 148

I can repeat it in Chrome 25 on Mac OS X 10.8.2.

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.

Upvotes: 0

Related Questions