Safari Performance Bug

[BenjaminLeguizamon]

Hi! First time posting here. Maybe you can guide me on what i'm doing wrong. I'm using background-position to animate, i know it not the best performance wise but i was also happening with transform translate. When animating on chrome and firefox it works fine but on safari it has like a jumpy effect and i can't get rid of that.

See the Pen QWxwKGp by benjaminleguizamon (@benjaminleguizamon) on CodePen

[GreenSock]

Welcome, @BenjaminLeguizamon!

 

Your biggest problem: 

transition: .3s linear;

You should NEVER apply CSS transitions to the same thing you're animating with GSAP. It's horrible for performance and screws up your timing. Every time GSAP tries to set the value, CSS transitions step in and say "NOPE! I won't let you do that...I'm gonna drag that out for 0.3 seconds..." (and that happens literally on every tick of the animation (typically 60 times per second). 

 

It also looks like Safari has a tough time rendering (totally unrelated to GSAP) unless you set will-change: transform on the element you're animating. Once I fixed those two things, it looked silky smooth in Safari (for me at least). 

[BenjaminLeguizamon]

Thanks for the quick answer. Really appreciate the help!