Search code examples
javascriptsafarisvgmobile-safarid3.js

SVG animations artifacts on Safari

I'm using d3.js to do some svg layout/animations and am running into the problem described by the first example here (only on Safari / Safari mobile):

http://www.mysparebrain.com/svgbug.html

(e.g., when the rect+text moves, it leaves rendering artifacts in its path)

Does anyone know of a workaround for this?

The only similar question on SO I could find is this unanswered one:

Canvas draws artifacts in Safari for animated, filled bezier curves

Solution

  • You should definitely file a WebKit bug report on this. You've already reduced it to a very clear test case, so that should make it easier for someone to fix it.

    Anything that forces a redraw based on horizontal positioning seems to fix it. I noticed just by switching to another tab and back caused it to redraw. What about doing a reposition of the content area, e.g., move right 1px then left 1px, to force a redraw? It's not pretty, but it's better than artifacts.