Streaming live at 10am (PST)

Extra Scrolling Mobile Nav

I’m having this issue on mobile when the nav is open, the body adds like 20 pixels of extra space underneath the page. On safari people can scroll endlessly while it’s open. Anyone know what’s going on here?


Here is my site Read-Only: **https://preview.webflow.com/preview/bridge-credit-solutions?utm_medium=preview_link&utm_source=designer&utm_content=bridge-credit-solutions&preview=d23295427b3dc695f62a59bc5cac16f0&mode=preview **

do you want the menu to cover whole page on mobile?

Open the menu and add a 100 VH to the Nav Menu. this should eliminate extra space on the page. so you won’t see the scrolling.

this is about disabling the scrolling for mobile menus

1 Like

Hey istirton

Great to see you, sorry you are encountering unwanted behavior!
That’s a nice looking site you’ve crafted there!

Using external animation libraries with Webflow can lead to unexpected behavior, the simple opening of an accordion menu can be done easily inside Webflow. But I’m not here to complain :slight_smile:
Without digging too deep, I’ve noticed the following:

After pressing the nav button, some of your imported scripts modifies quite a lot of your html.

For example

  • The nav element inside the div .nav-menu-3 w-nav-menu is moved two nodes down in the DOM tree, appended to .w-nav-overlay
    [ that’s quite unusual, could promote issues in terms of SEO and accessibility (important) and I’m not sure what’s the need for this ]

  • After the nav is moved inside .w-nav-overlay it receives new inline styles containing style="height: 11607.3px;"
    [ that’s a weird number, probably computed by some function of one of the external scripts. After changing the value to style="height: 100vh;" the empty space was fixed!]

So, safari seems to be okay with an element being 11k+ pixels in height, other browsers seem to handle that differently.

Here’s a gif of the html when opening / closing the menu:

problem

My advice would be:

  • Quick fix:
    Check how the height of the overlay is computed and change it to 100vh but be aware of using vh in mobile environments because chrome mobile has a URL bar that resizes and makes absolut positioned elements flicker on hiding/showing the URL bar! Use % if you can, you need to set a explicit height for parent elements though - or it won’t display any height!

  • Proper fix:
    Understand what the implemented scripts really do and maybe refrain from using them for simple things like an accordion menu

Hope I could help a little :slight_smile: Ask if you think I could assist any further! (I might take a day or so, not checking daily :frowning: )

Here’s some more useful (general) information regarding vh in mobile environments:

https://developers.google.com/web/updates/2016/12/url-bar-resizing
https://bokand.github.io/demo/urlbarsize.html
https://chanind.github.io/javascript/2019/09/28/avoid-100vh-on-mobile-web.html

2 Likes

good to know thanks.

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.