Question

I have made an example page at jsfiddle

If I enable the sway animation on the #dog element and scroll the page I see massive banding on the SVG.

If I turn the animation off (delete the -webkit-animation-name bit) the banding goes away and the SVG looks like it should (smooth)

Does anyone know what causes this issue? Any way to work around it?

I’ve only tried in Webkit browsers (Chrome, Canary, both on OSX)

Answer 1

I found a very hacky work-around for this.

Basically you need to repeatedly change the width from the original to the original minus 1 pixel and back again.

if($("#svgtest").css('width')=='15500px') {
    $("#svgtest").css('width','14499px');
} else {
    $("#svgtest").css('width','15500px');
}

You can see it in action at this fiddle.

Be warned though that it is a hack, not a real fix, but it does solve the SVG banding issue that I was experiencing.

Maybe someone can come up with a slightly less hackish solution to the problem?