1

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

Community
  • 1
  • 1
Glenn
  • 5,334
  • 4
  • 28
  • 31

1 Answers1

2

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.

Tony
  • 3,470
  • 1
  • 18
  • 23
  • FWIW, the testcase here isn't mine, but it's one of the few places that someone's mentioned it. I'll play around with the position and see if that helps. – Glenn Jul 11 '12 at 02:56
  • Oh, and according to the link on his site, the problem has been fixed in webkit, but I still see the issue in Safari IPad and Windows (haven't tried Mac yet). https://bugs.webkit.org/show_bug.cgi?id=74002 – Glenn Jul 11 '12 at 03:01
  • Sadly, the state of SVG on the web isn't great. It's 90% there, but there are still lots of corner cases that haven't been addressed. I wrote an SVG renderer for iOS and it was a lot of work, and I didn't even touch the animation stuff. – Tony Jul 11 '12 at 03:09
  • 1
    It's looking fairly decent at the moment--try some d3.js examples and I haven't found one yet that runs badly on the IOS. I've only encountered a few ugly problems which are mostly around fonts/text. This issue is the only generic rendering problem I've seen so far. – Glenn Jul 11 '12 at 03:16
  • This answer is pretty much how I fixed it. If I do it frame-by-frame the animation gets a bit choppy on IOS, but if I wait until the end and cleanup it's not too bad. Hopefully IOS 6 will have the latest webkit patches. – Glenn Jul 12 '12 at 21:19