Bug : Scroll lock mechanism does not work on Safari mobile 14 when the viewport is expanded

[francoislevesque]

What package within Headless UI are you using?

For example: @headlessui/vue

What version of that package are you using?

For example: v1.4.2

What browser are you using?

Safari Mobile 14 - iOS 14.8.1

Reproduction URL

https://codesandbox.io/embed/headlessui-vue-dialog-example-forked-n3q2p?fontsize=14&hidenavigation=1&theme=dark

Describe your issue

Open this URL https://n3q2p.csb.app/ on Safari Mobile, scroll towards the center, and click on "open modal".
The scroll lock does not work. It only seems to happen when the toolbar is minimized / when the viewport is extanded.

The current scroll lock mechanism appears incomplete for Safari Mobile.

We used to have the same issue with another project, we resolved it using this package: (https://github.com/FL3NKEY/scroll-lock)[https://github.com/FL3NKEY/scroll-lock].

[mirshko]

This occurs with the react package as well.

[VladSez]

Maybe we can adopt usePreventScroll hook from react-aria to resolve the issue?

[ctholho]

This is still a problem. Anything which is supposed to have a scroll lock looks terrible right now.

https://vueuse.org/core/usescrolllock/#directive-usage

Maybe the package source helps with a fix?

[jdpt0]

I'm having issues with the scroll lock on the dialog, which is resetting the scroll position whenever it activates due to the weird way scrolling is implemented in our app. May I suggest a boolean prop value that allows developers to disable scroll locking so they can implement their own solutions?

[RobinMalfait]

Hey! Thank you for your bug report!
Much appreciated! 🙏

This should be improved by #1824, and will be available in the next release.

You can already try it using:

• npm install @headlessui/react@insiders.
• npm install @headlessui/vue@insiders.

[rphlmr]

Hello @RobinMalfait,
I tried npm install @headlessui/react@insiders and maybe I'm doing something wrong but if I've some scrollable content in Dialog, it no more scrolls :/
I'll try to give you a reproducible demo.

Ok this is the demo: https://codesandbox.io/s/tailwind-test-6qqv40

You can directly test on a simulator / iOS with https://6qqv40.csb.app/

Edit : I open an issue ;) #1831