Giovanny7 Posted April 24, 2023 Share Posted April 24, 2023 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. RPReplay_Final1682299355.mp4 See the Pen OJBPpgb by officialgio (@officialgio) on CodePen Link to comment Share on other sites More sharing options...
GreenSock Posted April 24, 2023 Share Posted April 24, 2023 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. Link to comment Share on other sites More sharing options...
Giovanny7 Posted April 24, 2023 Author Share Posted April 24, 2023 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? Link to comment Share on other sites More sharing options...
Rodrigo Posted April 24, 2023 Share Posted April 24, 2023 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! Link to comment Share on other sites More sharing options...
Giovanny7 Posted April 24, 2023 Author Share Posted April 24, 2023 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. Link to comment Share on other sites More sharing options...
GreenSock Posted April 24, 2023 Share Posted April 24, 2023 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. Link to comment Share on other sites More sharing options...
Giovanny7 Posted April 24, 2023 Author Share Posted April 24, 2023 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. Link to comment Share on other sites More sharing options...
Rodrigo Posted April 24, 2023 Share Posted April 24, 2023 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! Link to comment Share on other sites More sharing options...
GreenSock Posted April 24, 2023 Share Posted April 24, 2023 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. 👍 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now