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.
The nav element inside the div
.nav-menu-3 w-nav-menu is moved two nodes down in the DOM tree, appended to
[ 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
[ 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:
My advice would be:
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!
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 )