Jump to content
GreenSock

IndikatorDesign

Works great everywhere, but not in Safari macOS

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi Guys,

 

has anyone ever experienced a "hanging experience" in Safari on MacOS before?

 

I've done some animations with GSAP (TimelineMax, drawSVG) in combination with ScrollMagic and it works great everywhere, with one exception - Safari on macOS.

 

The strange thing is, that it works pretty well in Safari on iOS.

 

Do you know of actions with which Safari has principally problem and which one should omit?


But why does it work great everywhere else?

 

Thank you and best regards, Bruno

  • Like 1
Link to comment
Share on other sites

Sorry, I'm really not aware of any problems unique to Safari. It did appear to run better on other browsers.

My guess is that Safari may do a worse job of rendering the SVG updates. I would omit all the SVG animations and see if there is a noticeable difference.

 

 

  • Like 2
Link to comment
Share on other sites

Yep, it looks like the problems are in the composite/paint operations.

 

composite-and-paint.png

 

Appears to be unrelated to GSAP.  I know it's a pain to convert, but if you really need better rendering performance, you may be forced to use a canvas solution like PixiJS (which you can animate with GSAP, of course). Or figure out a way to reduce the compositing/painting load. Make sure you're hiding everything that's not on the screen (like with visibility:hidden). 

  • Like 3
Link to comment
Share on other sites

Thanks for your fast response, but it seems not to be the problem. I deactivated the complete lazy object.

 

So the available and rendered code starts at:

 

var PageAnimations = function( $opt ) { this.init( $opt ); }

 

As you can see, the images are no longer lazy loaded and there are no svg's applied and there is no drawing. But it still works the same on Safari.

 

I have also disable minifying and cahing and enabled the debug mode..

Link to comment
Share on other sites

I still see very long composite/paint times. 

 

Unfortunately, we just don't have the resources to provide free general troubleshooting and performance optimization consulting for entire web pages/apps. If you think it's a GSAP-specific problem and can provide a reduced test case, we'd be happy to take a peek. But it sure looks like this isn't a GSAP-related issue. It's tough to diagnose something like this which has thousands of lines of code, several other 3rd party libraries in the mix, and is on a server we can't access. Codepens are great because we can get in there and make edits quickly and troubleshoot effectively. A live site isn't so easy. 

 

I wish I had a better answer for you and that I had more time to give. 

  • Like 2
Link to comment
Share on other sites

Hey Jack,

 

it's fine, I understand what you mean.

 

Thanks for your effort !

 

Best regards, Bruno

  • Like 1
Link to comment
Share on other sites

  • 2 weeks later...

I just wanna give you an update and perhaps it is useful for other people recognizing heavy performance issues.

 

So at first, it's absolutely no problem to use the SVG's added by ajax while scrolling with ScrollMagic and jQuery.Lazy. There is no canvas solution needed, it performs well, also on Safari.

 

It was possible for me to locate the problem. I had put a css-saturation filter on the SVG's like you can see here:

 

svg {
    -webkit-filter: saturate(70%);
            filter: saturate(70%);
}

 

You can use "will-change: filter;" to get better performance results, but I decided to remove it completely.

 

And now everything works fine on all browsers. Thanks for your efforts!

Link to comment
Share on other sites

Ah yes, filters can be TERRIBLE for rendering performance (as you discovered). Totally unrelated to GSAP, of course. It's just tough for the browser to crunch all the pixels for those filter effects. Thanks for sharing your findings. 

  • Like 2
Link to comment
Share on other sites

I had this issue with mac safari before several times. The animation is just jumping, the elements are disappearing. The solution was to disable jerkiness killing patch from my code. { rotation: 0.01, force3D: true, perspective: 1000 }.

God bless Cupertino!

  • Like 2
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.
×