[BUG] - Navbar menu does not scroll in iOS Safari or Chrome

[evanteague]

trafficstars

NextUI Version

2.4.0

Describe the bug

On iOS Chrome and Safari, if the number of items overflows the navbar container, and I am using the "menu" version of the Navbar component, it does not scroll. It does scroll on iOS Firefox, however.

I believe this is because the navbar is using vh units instead of dvh units. All you should need to do is modify this line https://github.com/nextui-org/nextui/blob/6d9995bad1c2b6a85d5df88c4fb4393ac264292b/packages/components/navbar/src/navbar-menu-transitions.ts#L5

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

1. Use the Menu version of the Navbar component https://nextui.org/docs/components/navbar#with-menu
2. Add enough items requiring a scroll
3. View the menu on iOS Safari and Chrome
4. Notice that the menu does not scroll

Expected behavior

As a user on iOS Safari and Chrome, I expect to be able to scroll up and down the menu version of the Navbar component if the content overflows its container.

Screenshots or Videos

No response

Operating System Version

iOS 17.5.1

Browser

Safari

[linear[bot]]

ENG-1257 [BUG] - Navbar menu does not scroll in iOS Safari or Chrome

[villAsh]

I would like to work on this, can you please assign this to me?

[wingkwong]

assigned. please provide a before and after video for verification in your PR.

[wingkwong]

@villAsh any update?

[b-bot]

Some interesting ideas here to remedy this: https://github.com/tailwindlabs/tailwindcss/discussions/4515

My issue is that I have an item that is positioned at the bottom of the expanded menu and it's obscurred by the iOS bottom navigation.

This ugly piece of code works but disables the slide down transition: className="supports-[height:100cqh]:!h-[calc(100cqh-4rem)] supports-[height:100svh]:!h-[calc(100svh-4rem)]"