SVG animation with GSAP - Graphical Trailing Glitch

[bandaro 0 Likes (Newbie)]

I'm currently using GSAP to create a few banners with SVG shapes (text from Illustrator outline since I can't get Webfonts for these). They work and look fine on my machine, but when tested on a PC in Chrome, there is a small issue where the moving SVG element leaves a sort of "trail" graphically, but only when viewed at 100%.

I've attached a mocked up version of the issue (I tried getting the user to provide a zoomed in screenshot but she says the issue vanished when zoomed in).

Has anyone encountered this when animating SVG elements? I am imagining it is probably a hardware issue.

 

[Dipscom 3,366 Likes (Superhero)]

Hi bandaro, do you think you could setup a reduced example where the issue is reproduced? I've never heard or seen such behaviour. We'll be more than happy to assist you but we will need to able to see the issue in question.

 

Thanks!

[PointC 14,419 Likes (Superhero)]

GSAP only animates numeric properties. It doesn't do any of the rendering so I don't see how this could be caused by the platform. 

 

It sure looks like a graphics card/driver problem to me.

 

Happy tweening.

[joe_midi 251 Likes (Leader)]

I agree with @PointC.

 

I've had similar issues when animating SVG's on older versions of iOS, and although that was using SMIL rather than GSAP, but I doubt that would have made a huge difference.

 

I would test on other PC machine with the same version of Windows/Chrome.

 

One question though, is that text an SVG font? or has the text been converted to outlines? 

[bandaro 0 Likes (Newbie)]

Text was converted to outlines. I'm assuming it is a hardware issue, as mentioned here. I haven't gotten the chance to test on an alt machine yet, but I'll do that. Thanks!

[hhdev 2 Likes (Newbie)]

Totally raising this from the dead but this is because of the animation inaccurately repainting insufficient area... quick fix is to add box shadow or outline.

 

Check out this Stackoverflow:

 

http://stackoverflow.com/questions/9983520/webkit-animation-is-leaving-junk-pixels-behind-on-the-screen