bug: v5 navbar dropdown not closing on Safari in iOS

[fabge]

What version of daisyUI are you using?

v5.0.0-beta.6

Which browsers are you seeing the problem on?

Safari

Reproduction URL

https://gist.github.com/fabge/6767c8c34f62d7da8d70a410e4e377ce

Describe your issue

i am testing the responsive navbar (dropdown menu on small screen, center menu on large screen) - no code changes, just the vanilla example from the docs.

it works flawlessly on desktop in all browsers. it also works on iOS when using firefox.

however, when using it in safari on iOS, the dropdown menu opens but it's not possible to close it anymore, neither by clicking on the hamburger menu, nor outside of the dropdown anywhere on the screen.

[github-actions[bot]]

Thank you @fabge for reporting issues. It helps daisyUI a lot 💚
I'll be working on issues one by one. I will help with this one as soon as a I find a solution.
In the meantime providing more details and reproduction links would be helpful.

[saadeghi]

Does this dropdown work on your phone?
https://daisyui.com/components/dropdown/#dropdown-menu

Also, what's the iOS version?

[fabge]

The examples in daisyUI's v5 documentation work, but it doesn't when running locally. I am using iOS 18.3.

I have created a minimal viable repo to reproduce this: https://github.com/fabge/daisyui-ios-navbar-bug

Here is a video showing the successful dropdowns in the v5 documentation and the unsuccessful one when "self hosting". You can also see in the last example, that the button press is not displayed when clicking on the hamburger menu:

https://github.com/user-attachments/assets/fc3000a4-ffad-4467-af00-3c5ad9489e2f

[layandreas]

Can confirm, I have the same issue.

[pdanpdan]

Can you check if adding tabindex="-1" on body fixes the problem?

I think you have this problem: https://dev.webonomic.nl/fixing-the-iphone-css-hover-problem-on-ios

Please try one of the methods in the link and report back here if it solves the problem for you or not, and which method.

[pdanpdan]

I think this can be closed.

There is nothing that can be done on daisyUI side, the reason is a combination of:

• page not having content and not set to be at least screen height (so when you click below the header there is nothing there)
• ios needing some small tweaks in order to get clicks/focus on body (tabindex and/or a listener on touchstart)
• this should be both fixed in the final design