Section wipes lag on safari (iOS/Mac)

[Haafling]

Hello everyone,

 

With Scrollmagic, I added a section wipes (manual) on my website. I used the source code from this post https://greensock.com/forums/topic/18939-scrollmagic-section-wipes-with-multiple-sections-in-each-panel/. So the JS is copy pasted from 

See the Pen eLgpWa by PointC (@PointC) on CodePen

.

 

 

 

I use MacOS. It's super smooth on Chrome and super laggy on Safari ... See here http://dylanmura.com/ff2/

I have no idea why, can someone help me?

 

Thank you in advance, 

 

See the Pen by ff2 (@ff2) on CodePen

[GreenSock]

We're happy to answer any GSAP-specific questions, but we just don't have the resources to offer free performance audits on live web sites and general troubleshooting, especially with things like ScrollMagic which is not a GreenSock product. 

 

That being said, I noticed a few things:

1. You have CSS transitions applied to things - those can definitely get in the way and cause problems when you try to animate anything with JS too. Definitely avoid applying those to anything you're animating with GSAP (or any JS). 
2. You've got CSS filters applied to things - those are VERY processor-intensive for the browser to render. That's likely what's killing performance for you. You've got a bunch: brightness(100%) hue-rotate(0deg) saturate(100%) contrast(100%) which frankly seem kinda wasteful. 
3. You've got like 2500 lines of CSS - seems like a lot. 
4. You've got a bunch of jQuery animations - I'd recommend avoiding those (GSAP is up to 20x faster)
5. You've got a lot of deeply nested <div> elements and perhaps you're triggering document reflows that are very difficult on the browser to render. 

Again, if you've got any GSAP-specific questions, we'd be happy to help but if you're looking for general performance auditing and troubleshooting of a live site, this isn't the best place for that. 

 

Happy tweening!

[Haafling]

Thank you for your kind answer! I’m still newbie. I will try your suggestion and post the results.

 

But still I don’t understand why the gap of perfomance is so huge between Safari and Chrome on the same machine?

 

 

Thank you again 

[ZachSaucier]

2 minutes ago, Haafling said:

why the gap of perfomance is so huge between Safari and Chrome on the same machine

They are different browsers so they're going to perform differently. They use the same engine but do different things on top of that engine. We can't give you the specific as we don't work on either browser or have much of any idea of how they do things.