Thomas H Posted July 27, 2022 Share Posted July 27, 2022 Hi all, I am currently facing an issue with a section on my website with overlapping layers. My goal is to show all three subjects in layers on the bottom of the screen, and when further scrolling showing the complete layers iteratively. The application can be found in the Codepen: . The problem I am facing is that the performance on mobile phones seems to decay significantly causing laggy or bad fps while scrolling. The performance on laptops seems to be perfectly acceptable I have tested this on both android and iOS, and all types of browsers. I hope you guys can shed some light on the situation! Looking forward to hearing from you. Kind regards, Thomas See the Pen qBoPYQJ by thomashelling (@thomashelling) on CodePen Link to comment Share on other sites More sharing options...
Dipscom Posted July 27, 2022 Share Posted July 27, 2022 Hi Thomas! Welcome to the forums! Tell me, are you experiencing such laggy behaviour with the example pen you have provided or is it a different application with very large images layered on top of each other and/or many looping animated elements on the DOM? 1 Link to comment Share on other sites More sharing options...
Thomas H Posted July 27, 2022 Author Share Posted July 27, 2022 Hi Dipscom, Thanks a lot! The laggy behaviour is already present in the current codepen. When opening the codepen link directly in iOS one immediately notices a lag when arriving at the three overlapping layers. Hope you can reproduce it and to hear from you soon! Link to comment Share on other sites More sharing options...
Dipscom Posted July 27, 2022 Share Posted July 27, 2022 Hey Thomas, I've forked your pen and had a look here on my phone as well as my desktop (I know you said it works smoothly on desktop). I've added <meta name="viewport" content="width=device-width, initial-scale=1"> to the header and loaded on my Android but saw no laggy behaviour. I understand you said you saw it on iOS. I don't have an iPhone or iPad to hand now but I'll have one tomorrow. I shall check and report back but, I'll be very, very, very surprised to see any laggy behaviour on that Pen. Link to comment Share on other sites More sharing options...
iDad5 Posted July 27, 2022 Share Posted July 27, 2022 No lag here on iPhone 12pro and iPad pro 2020. Link to comment Share on other sites More sharing options...
Thomas H Posted July 27, 2022 Author Share Posted July 27, 2022 Hi Dipscom and iDad! I have checked this on multiple devices and multiple screens, both android and iOS and its a subtile difference. Please also note the fluent scroll from the upper section against the below section. It stutters a bit, and I feel this is the reason that with more content my animation is stuttering. You can also find the link to my website, but the animations there are a bit more complex. WhatsApp Video 2022-07-27 at 10.27.19 PM.mp4 Link to comment Share on other sites More sharing options...
GreenSock Posted July 27, 2022 Share Posted July 27, 2022 Yeah, it seemed fine on my iPhone 12 and iPad. iOS Safari seems to struggle in certain scenarios rendering-wise (not directly related to GSAP). Filters are horrible. And perhaps because you've got 2 position: fixed elements layered on top of each other with a linear gradient and transforms constantly changing...the way Safari does compositing/layerizing may just make it challenging. 🤷♂️ Link to comment Share on other sites More sharing options...
Thomas H Posted July 27, 2022 Author Share Posted July 27, 2022 Hi Greensock, thanks for your reply! I do experience similar laggy behavior on chrome on my phone (iPhone 13 pro) 1 Link to comment Share on other sites More sharing options...
Cassie Posted July 27, 2022 Share Posted July 27, 2022 It's sneaky but chrome on iPhone is actually safari underneath. Apple only allows their own browser (I know. Boo) 1 Link to comment Share on other sites More sharing options...
Thomas H Posted August 9, 2022 Author Share Posted August 9, 2022 Thanks a lot for your replies! In the end I have resolved the issue by removing GSAP for that specific element and simply used position sticky! 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