Body scroll position got shifted after closing dialog on iOS

[just-small-potato]

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:

RPReplay_Final1726988713.MP4

1. Open Codesandbox preview on iOS Safari.
2. Click the filter icon to open the Dialog.
3. Click any sub category navigation link within the Dialog. (In the video I clicked "Hip Bags")
4. The page should scroll to "Hip Bags" section
5. Observe the body scroll position after closing the Dialog.

Expected behavior:
The body scroll position should remain consistent after closing the Dialog.

Actual behavior:
The body scroll position shifts unexpectedly on iOS.