A one page mobile/tablet version of a website I’m working on, my desktop version is hidden with display none and vice versa
The mobile/tablet website has the following sections from top to bottom:
temple_mb
quote_holder_1_mb
services_mb
story_mb
namaste_mb
These are all being held by the body
What the issue is →
When I scroll to the last section (namaste_mb) on mobile I can’t see the section, the browser is not letting me scroll to end of the page.
My thoughts →
I have tried to recreate the last section step by step to see what could be the problem and even deleting it but the problem remains. I guessing this is a section height or a body problem. It seems the issue is something related to scrolling.
I have been told that the problem could be within my Javascript and the GSAP ScrollTrigger, I have re-written the code to avoid issues, it works fine on Desktop but not mobile or Tablet.
Any idea what is wrong and how to fix this? I have added the published version to see the page.
For scrolling issues on mobile and tablet devices, here are some common solutions to try:
The visibility issue might be related to viewport settings or scroll animations. Check your viewport meta tag in the page settings to ensure it’s properly configured for mobile devices. Also, review any scroll-triggered animations, as these can sometimes cause visibility issues on iOS devices due to their scroll event handling.
Some specific areas to check:
Ensure your section has appropriate height settings (avoid VH units on mobile if possible)
Check that your content isn’t being hidden by overlapping elements
Verify that any scroll triggers have appropriate fallbacks for mobile devices
Test your site in different mobile browsers to isolate if it’s a device-specific issue
If you’re using scroll triggers, consider setting up alternative animations for mobile devices using breakpoints, as this can help avoid compatibility issues with iOS scroll event handling.
Hopefully this helps! If you still need assistance, please reply here so somebody from the community can help.
Yes, I’m looking at it on an iPhone in Safari and Chrome. The section appears as expected and the nav link jumps me correctly.
Note: I recommend adding a ‘menu-close’ interaction to your anchor-links so that the menu closes and viewer can see the page scroll down. Then they don’t have to manually close the menu once there.
If this causes a conflict with your existing menu-close button, be sure to use FinSweet’s Mirror Click Events feature, which can be used to reset the close button’s interaction.
I agree with Port_of_Folio to add a menu close interaction when a user clicks the navigation links.
However, on Android device I am not yet able to see the last section that you have - it does not work via scrolling or via navigation item as well, so you might need to test it out on all devices to mark this fool proof.
I have now fixed the menu on both Desktop and Mobile
What I’ve done:
I stripped the webflow functionality and animations
Recreated the animations and functionality on custom code with Javascript and GSAP
Each menu has their own Javascript tags with their own respective code
The desktop Javascript tags include menu and website animations with GSAP
The mobile version Javascript tags include menu only
All menus are now fixed
What the problem is:
I’m still having problems seeing the last section on mobile in Android I tried FinSweet’s Mirror Click Events and GSAP’s matchMedia and none of the worked
My thoughts:
I’m starting to think this is a Android issue maybe Android doesnt support certain measurements?