SVG animation leaves banding artifacts in Chrome Version 23.0.1271.95

Asked Dec 06 '12 at 18:05

Active Dec 06 '12 at 18:05

Viewed 674 times

While testing an SVG animation I've run into a rendering problem in Chrome Version 23.0.1271.95.

The animated triangles seem to leave some black vertical banding. This goes away if you tab away from the page and back or if you otherwise force a redraw.

You can find the animation test here: http://bit.ly/HexaGridTest

And here's a screenshot: enter image description here

Looking at other posts on similar issues it seems that the only way to eliminate this GPU-acceleration-related problem is to force a redraw at the end of the animation.

Someone suggested adding -webkit-backface-visibility: hidden to the SVG, but this didn't solve the issue for me.

Is there any alternative? Any flag or CSS property I could set to avoid the artifacts?

asked Dec 06 '12 at 18:05

HappyTorso

Try adding `-webkit-backface-visibility: hidden` to a parent div (must be created) instead of the SVG itself. – methodofaction Dec 06 '12 at 18:35
Updated the test with the CSS you suggested, but to no avail. – HappyTorso Dec 06 '12 at 22:18
Feel free to update the question with a link to a webkit/chromium bugreport. – Erik Dahlström Dec 10 '12 at 12:37

SVG animation leaves banding artifacts in Chrome Version 23.0.1271.95

0 Answers0