Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
BrianCross

Safari v15 Rendering Bug

Go to solution Solved by GreenSock,

Recommended Posts

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

Link to comment
Share on other sites

  • Solution

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. 🤕

  • Like 2
Link to comment
Share on other sites

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!

  • Like 2
Link to comment
Share on other sites

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. 

  • Like 1
Link to comment
Share on other sites

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

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×