Bug 31960 – SVG: DOM animation of <svg> elements fails to redraw properly

• Status: RESOLVED
• Resolution: FIXED
• Component: SVG

[Richard Connamacher]

Created attachment 43990 [details]
Test case

Animating an <svg> element via the DOM leaves ugly tearing artifacts on the screen that remain until a redraw is forced (i.e. by resizing the window).

The included SVG file causes a blue rectangle to move continuously (and randomly) around the screen, leaving plenty of tearing artifacts. The blue rectangle is represented by an <svg> object containing a <rect>:

	<svg id="card" width="100" height="140" x="50" y="100">
		<rect class="card-back" width="100" height="140" rx="10" ry="10" fill="blue" stroke="black" stroke-width="2" />
	</svg>

if the animation were applied directo to the <rect> element, no tearing occurs. The tearing only happens when the target of the animation is the <svg> element.

If the <svg id="card"> element is placed inside a <g> element (strangely enough), this bug disappears.

(Tested on Mac OS X 10.5 and both Safari 4.0.4 and nightly r51397, the latest version as of 11/29/2009.)

[Richard Connamacher]

Created attachment 44204 [details]
Screenshot showing the visual bug

[Nikolas Zimmermann]

This is fixed in trunk. Leaving a note on my desk to add this testcase as webkit layout test. Thanks for the bug report!