Safari v15 Rendering Bug

[BrianCross 50 Likes (Contributor)]

Hi Everyone, hope your weekend is going well.

 

I updated my iPhone to iOS 15 the other day and now some animations that worked fine before have some strange rendering bugs. If you open this CodePen on an iOS 15 device you'll see what I mean. When you open the nav menu it's fine, but when you close it some sections of the div are left behind. I've confirmed similar strange behaviour on 2 other sites I've built recently. Adding the autoAlpha property to the tween is a workaround but shouldn't be necessary. The animations of course work perfectly on Chrome desktop.

 

Has anyone else seen weird behaviour on Safari 15?

See the Pen wvqZPEq by BrianCross (@BrianCross) on CodePen

[GreenSock 18,586 Likes (Superhero)]

That is super strange indeed - definitely a Safari rendering bug.  🙄

 

To optimize performance and sharpness, GSAP has force3D: "auto" which means that during the animation it uses a 3D transform because it forces GPU acceleration, but then at the end of the tween it shifts back to 2D in order to maximize sharpness (some browsers render 3D stuff more pixelated, especially when scaled up). It looks like this version of Safari doesn't handle that change well. 

 

There are 3 potential solutions to choose from (at least from what I saw):

1. Set will-change: transform on the element (CSS)
2. -OR- set force3D: true on the animation(s). You could also set it as the default for everything with gsap.config({force3D: true});
3. -OR- set force3D: false on the animation(s). You could also set it as the default for everything with gsap.config({force3D: false});

Weird, right? Thanks Apple. 🤕

[BrianCross 50 Likes (Contributor)]

Excellent, thank you so much Jack. Yeah, Safari is terrible; very frustrating to work with.

 

All three of your suggestions fix the issue. I think the will-change: transform; is the best solution since it allows GSAP's optimizations to be used.

 

Thanks again; it's much appreciated!

[GreenSock 18,586 Likes (Superhero)]

Great. Just to be clear, I'm pretty sure that setting will-change: transform forces the element to get GPU-accelerated anyway so it isn't like GSAP's 3D transforms will add any further optimization. 

 

Glad to hear it's resolved now. 

[BrianCross 50 Likes (Contributor)]

Ah, good to know. I’ve never really used it before. Thanks for the info.