I copied the code sample from the Tailwind CSS Category Filters on the Tailwind UI website and made slight modifications to the filter panel which adds anchor links to sub categories navigation links. My goal was to ensure that clicking on the navigation links would scroll to the appropriate section.
On desktop, the navigation links are located in the left sidebar. However, on mobile, these links are nested inside the <Dialog/> component, which the visibility of <Dialog/> is triggered by clicking the filter icon.
The issue arises on mobile: when any navigation link is clicked and the Dialog is closed, the body scroll position shifts unexpectedly on iOS Safari. The same issue doesn't seems to happens on Android Chrome.
What package within Headless UI are you using?
@headlessui/react
What version of that package are you using?
v2.1.8
What browser are you using?
iOS Safari (iOS 15+)
Reproduction URL
https://codesandbox.io/p/devbox/tailwind-headless-ui-dialog-bug-m8763s
Describe your issue
I copied the code sample from the Tailwind CSS Category Filters on the Tailwind UI website and made slight modifications to the filter panel which adds anchor links to sub categories navigation links. My goal was to ensure that clicking on the navigation links would scroll to the appropriate section.
On desktop, the navigation links are located in the left sidebar. However, on mobile, these links are nested inside the
<Dialog/>component, which the visibility of<Dialog/>is triggered by clicking the filter icon.The issue arises on mobile: when any navigation link is clicked and the Dialog is closed, the body scroll position shifts unexpectedly on iOS Safari. The same issue doesn't seems to happens on Android Chrome.
Steps to reproduce:
https://github.com/user-attachments/assets/e09ff2b0-b372-4147-9b3a-38618d5c9674
Expected behavior: The body scroll position should remain consistent after closing the Dialog.
Actual behavior: The body scroll position shifts unexpectedly on iOS.