headlessui icon indicating copy to clipboard operation
headlessui copied to clipboard

Published 20 hours ago • verified publisher icon tailwindlabs

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

Open francoislevesque opened this issue 3 years ago • 4 comments

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

Edit @headlessui/vue dialog Example (forked)

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].

francoislevesque avatar Nov 23 '21 03:11 francoislevesque

This occurs with the react package as well.

mirshko avatar Dec 02 '21 13:12 mirshko

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

VladSez avatar Dec 10 '21 01:12 VladSez

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?

ctholho avatar May 25 '22 01:05 ctholho

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?

jdpt0 avatar Jun 22 '22 00:06 jdpt0

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.

RobinMalfait avatar Sep 05 '22 22:09 RobinMalfait

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 ;) https://github.com/tailwindlabs/headlessui/issues/1831

rphlmr avatar Sep 07 '22 09:09 rphlmr