CODEWITHSUNDEEP
csssvgwebkitcss-animations
darryn.ten
darryn.ten

Reputation: 6983

Webkit Animation breaking SVG below it

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)

Upvotes: 3

Views: 178

Answers (2)

darryn.ten
darryn.ten

Reputation: 6983

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?

Upvotes: 0

methodofaction
methodofaction

Reputation: 72415

It seems that the animation triggers the GPU which renders the gradient poorly, the bug can be reproduced by simply applying translate3d(0,0,0) on #test. http://jsfiddle.net/LKmbN/

Barring turning off GPU acceleration the only workaround I can think of is animating through javascript. Hopefully someone can come up with something less painful.

Upvotes: 2

Related Questions