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?
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
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-menuis 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-overlayit receives new inline styles containingstyle="height: 11607.3px;" [ that’s a weird number, probably computed by some function of one of the external scripts. After changing the value tostyle="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:
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 Ask if you think I could assist any further! (I might take a day or so, not checking daily )