fonveton Posted March 3, 2022 Share Posted March 3, 2022 I have a section, that i'm using gsap. Everthing is okey with chrome and firefox but when i scroll while using safari, whole pinned section is flickering. You can try with codepen or test the issue from here: https://demo.pentayazilim.net/ravena/ I tried changing scrub value, pinReparent and anticipatePin so far. Is there a way to prevent flickering while using pinned scrolltrigger with 100vh section for safari? See the Pen abVPXga by manidar (@manidar) on CodePen Link to comment Share on other sites More sharing options...
elegantseagulls Posted March 3, 2022 Share Posted March 3, 2022 Hey @fonveton Can you simplify your demo further? There's still a lot going on there, and a lot of code to sift though. 2 Link to comment Share on other sites More sharing options...
fonveton Posted March 3, 2022 Author Share Posted March 3, 2022 @elegantseagulls I simplified it as much as I can. Link to comment Share on other sites More sharing options...
GreenSock Posted March 3, 2022 Share Posted March 3, 2022 I'm not seeing any flicker. Are you talking about when the pinning kicks in? And are you saying Safari is a problem even on desktop or just iOS? 1 Link to comment Share on other sites More sharing options...
elegantseagulls Posted March 3, 2022 Share Posted March 3, 2022 1 hour ago, GreenSock said: I'm not seeing any flicker. Are you talking about when the pinning kicks in? And are you saying Safari is a problem even on desktop or just iOS? I did see it, it's more of a jerking/twitching than a flicker. I'm in Version 14.1.2. However, I do not see it in the latest cleaned up CodePen. I'm wondering if you have some conflicting things going on in your other animations. @fonveton are you still able to replicate in the latest codepen -- Also It'd be helpful for debugging pinned sections to add a little buffer section above and below the pin to make sure that that is setup properly. 2 Link to comment Share on other sites More sharing options...
Solution fonveton Posted March 4, 2022 Author Solution Share Posted March 4, 2022 https://prnt.sc/B1LEe1wDYEWP This litte triangle was to blame. I was trying to move it based on longer lines on side of it. But safari was miscalculating offset().top. Thank you all for your help. Have a wonderfull weekend. 2 Link to comment Share on other sites More sharing options...
kubik101 Posted August 7, 2023 Share Posted August 7, 2023 Hi @fonveton I have a similar issue here: https://www.mtbarkerwaldorf.sa.edu.au Make sure you are in Safari. Just scroll up and down and make the first 2 blobs go off screen and come back on screen (second section on page) and you will notice a flash of content (the blobs). Is the same behaviour you were experiencing? If so, what was the correction in your calculations for offset().top that you made? Thanks. Att: @GreenSock Link to comment Share on other sites More sharing options...
GreenSock Posted August 7, 2023 Share Posted August 7, 2023 @kubik101 I'm having a difficult time reproducing the issue, but have you tried setting ScrollTrigger.normalizeScroll(true)? If you still need help, please make sure you post a minimal demo (like a CodePen or Stackblitz) that only has the essential pieces to illustrate the problem clearly. Please don't include your whole project. Link to comment Share on other sites More sharing options...
kubik101 Posted August 7, 2023 Share Posted August 7, 2023 @GreenSock Thanks for your reply. Is normalizeScroll an iOS only thing? My issue is macOS Safari, did you look on macOS? Link to comment Share on other sites More sharing options...
GreenSock Posted August 7, 2023 Share Posted August 7, 2023 No, normalizeScroll() is not only for iOS. It's just most visible there. Yes, I looked on MacOS Safari. Link to comment Share on other sites More sharing options...
kubik101 Posted August 7, 2023 Share Posted August 7, 2023 Ok thanks. May I ask what version of MacOS Safari you viewed on? Mine is: Version 16.5 (16615.2.9.11.6, 16615) Link to comment Share on other sites More sharing options...
GreenSock Posted August 7, 2023 Share Posted August 7, 2023 Version 16.5.1 (18615.2.9.11.7) Link to comment Share on other sites More sharing options...
kubik101 Posted August 7, 2023 Share Posted August 7, 2023 Thanks @GreenSock I will need some more help and will make a codePen when I ask for it. Shall I post a brand new topic, or continue it here? Link to comment Share on other sites More sharing options...
GreenSock Posted August 7, 2023 Share Posted August 7, 2023 3 minutes ago, kubik101 said: Shall I post a brand new topic, or continue it here? Definitely create a new thread please. Thanks. For the record, I'm pretty confident this has absolutely nothing to do with GSAP/ScrollTrigger - it's very likely a graphics rendering issue in Safari itself. Link to comment Share on other sites More sharing options...
kubik101 Posted August 7, 2023 Share Posted August 7, 2023 2 minutes ago, GreenSock said: For the record, I'm pretty confident this has absolutely nothing to do with GSAP/ScrollTrigger - it's very likely a graphics rendering issue in Safari itself. Thanks for that, I appreciate your hunch, opinion, I will be testing on other machines. Lastly may I ask what Mac device you viewed on? Mine is: iMac (Retina 5K, 27-inch, Late 2014) Link to comment Share on other sites More sharing options...
GreenSock Posted August 7, 2023 Share Posted August 7, 2023 M1 MacBook Pro Link to comment Share on other sites More sharing options...
kubik101 Posted August 7, 2023 Share Posted August 7, 2023 1 minute ago, GreenSock said: M1 MacBook Pro Side note: Killer, I need to upgrade, waiting to see if they eventually do a M? iMac 27" or bigger. Thanks so far. 😃 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