GSAP Flickering Nav Animation on mobile

[Giovanny7]

Hi,

 

For some reason, I get this noticeable flickering effect on my IOS phone. On the desktop the nav animation works perfectly fine in safari and chrome and if I try opening the mobile responsive window in the developer tools it also works fine. I'm not entirely sure if this is related to webkit thing that I'm missing since the flickering is occurring on mobile Safari. 

 

It seems that this is happening to my roundiv-div element which makes the illusion of a rounded nav opening and closing. Below is a screen recording. 

See the Pen OJBPpgb by officialgio (@officialgio) on CodePen

[GreenSock]

Your video doesn't seem to match the CodePen you provided. Is it the email button that you're talking about? 

 

Have you tried removing 3rd party tools like LocomotiveScroll and barba from the equation? And also update to the latest GSAP version (you're using 3.8.0 but we're at 3.11.5 right now).

 

Sounds like maybe a browser rendering bug (unrelated to GSAP). Safari on iOS is the most buggy browser I've ever seen by far. 

[Giovanny7]

I'm talking about the opening nav which is the fixed-nav element.

 

I've notice my cdn are not up to date, now I've just updated them but it seems that it broke the code. I just updated it on the same codepen and scrolling doesn't work anymore after I added scroll trigger cdn. 

 

Did I do something wrong?

 

 

[Rodrigo]

Hi,

 

There are a lot of errors and warnings on your codepen:

 

In line 11 word is undefined:

word.classList.add('loading--active');

 

Also it seems that you also have barba for transitions there as well. I'd suggest you to fix those errors first and then see what could be the issue. Maybe is related to one of those warnings as well.

 

Happy Tweening!

[Giovanny7]

Hello,

 

Ignore the errors. The errors are due to not providing the rest of the HTML code which has nothing to do with the issue I've encountered. With or without the HTML the nav bar is flickering or more specifically I think the rounded-div is the issue since that is the last left-most element in the fixed-nav.

 

Before I did any Barba transitions the flickering will still be there so It's not related to Barba or missing HTML elements errors. 

 

Please take a look at the same code pen, I've provided the first full-page html doc without the second page which codepen isn't allowing me but it shouldn't matter for this issue.

 

NOTE: I have the full code and I have already fixed any necessary errors before posting this issue.

 

 

[GreenSock]

Have you tried removing filters? Those are really hard on Safari rendering-wise (unrelated to GSAP). I noticed that you've got a blur filter and brightness filter. 

[Giovanny7]

Yes, I've tried doing that already but it didn't make a difference + I updated the codepen by removing the filters as well.

 

Not sure if you're seeing the flickering on your end on an IOS device.

[Rodrigo]

Hi,

 

I'm not seeing flickering on my device (iPad), but the suggestion I can offer is to implement the logic from this example:

See the Pen mdKWBmm by GreenSock (@GreenSock) on CodePen

 

Like that you don't have to rely on filters and perhaps it'll improve performance.

 

Hopefully this helps.
Happy Tweening!

[GreenSock]

Yeah, I'm not really seeing flickering. You could try setting the CSS user-select to none or maybe. Sorry, we really try to keep the forums focused on GSAP-specific questions. 👍