Dialog Scrollbar doesn't work properly on Mobile Devices

[jagustin]

What package within Headless UI are you using?

@headlessui/react

What version of that package are you using?

1.7.10

What browser are you using?

Chrome and Safari on iPhone 13 Pro

Reproduction URL

Repo
https://github.com/jagustin/modal-tailwind-test
Instructions:
Scroll down until the button "Open Dialog" and tap it. When the Dialog is opened scroll up and down on the left of the screen you will notice that the body will scroll (The Dialog don't need to scroll, the content is not enough to cover the screen but the scrollbar appear..)

Video
https://drive.google.com/file/d/1FV-TcZK_ZxtYEsDIjaBorD-1QeNip31b/view?usp=share_link

Describe your issue

When the Dialog Modal is opened and the body has been scrolled before, the scroll event works for the body scroll but not for the Dialog Modal. That only happens on mobile devices. I am including a repo and video to help you understand the issue.

[RobinMalfait]

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

Please make sure that you commit and push all the necessary code to reproduce this bug. The current reproduction doesn't have an open dialog button.

[jagustin]

@RobinMalfait the repository was updated. Thank you.

[RobinMalfait]

@jagustin I can't seem to reproduce this (I'm iPhone 14 Pro Max, iOS 16.3). Can you try and clear your node_modules and your .next cache?

rm -rf ./node_modules .next
npm install
npm run dev

This is a bug we used to have in Headless UI, but that should have been solved already, my guess/hope is that you have a bogus build and some old version of Headless UI despite installing the latest version.

[jagustin]

@RobinMalfait I just removed the cache and install everything. The issue continue
https://drive.google.com/file/d/1hXCKCGbxF5JfbKoCxkOr8hqKzSKWsCTK/view?usp=share_link

To replicate as soon as the dialog is opened, you could scroll up and down very close to end of the screen (left side). It looks like the overlay doesn't cover all the screen and the gesture take the body scroll.

[RobinMalfait]

@jagustin it took a while, but I can reproduce it now. Will have a look and keep you posted.

[RobinMalfait]

So here is a fun discovery, I can reproduce it using the "Single Tab" browser setting, but not using the "Tab Bar".

🧐

[bhaidar]

Hey! Is there a solution to this? Thanks

[danielbichuetti]

Facing the same issues with Chrome on iPhone 6 and iPhone 14 iOS 15.

Maybe a regression?

[LeonDWong]

I find out the problem is that body is still scrollable when dialog appeared in iOS safari(webkit based browser). Here's my solution, just make body not scrollable after dialog appeared, also set height by marginTop which is same as scrollTop, at least it does the trick for me.

  const makeBodyNotScrollable = () => {
    document.body.style.height = `calc(100vh - ${document.body.style.marginTop})`;
    document.body.style.overflowY = 'hidden';
  }

  return (
    <Transition appear show={visible} afterEnter={makeBodyNotScrollable}>
      <Dialog>
      </Dialog>
    </Transition>
  )

Hope this helps.

[binhit92]

Hi guys, i have same issues with browsers on ios 14, dialog can not show.
@RobinMalfait maybe you have any solution?

[RobinMalfait]

Hey!

I believe this is solved now if you use the latest next release:

• npm install @headlessui/react@next

This next release is for our upcoming 2.0 release. I'm working on a 1.7.x release right now to backport the necessary changes. But you can already test things. 👍

[1abdurRehman]

Any solution to this problem? facing the same issue

[nazaninsoleimanian]

@RobinMalfait

Hey!

I'm still experiencing this issue with browsers on iOS.I use nexjs 14 and headless ^2.0.0-alpha.4, I tried installing @headlessui/react@next and used the makeBodyNotScrollable function that you suggested above, but the scrollbar in the dialog still doesn't work.

When we click on any element on the modal, a touch-action: none style is applied to that element, which I think is the reason for not being able to scroll on mobile iOS.
Ensure your modal and its elements do not get this style by overriding it or removing it when applied.

Thank you!

[adrianxadamn]

how do we prevent touch-action from applying to element that it shouldn't even apply to? Depending on how you scroll on a mobile phone while simultaneously opening a component (drawer) will somehow add touch-action:none style to any element that you touch.

Update:
Depending on your use case, adding the blow to will mitigate your issues. #3378 (comment)

onTouchMove={(e) => {
  e.stopPropagation()
}}
onTouchStart={(e) => {
  e.stopPropagation()
}}

and adding these styles to override touch-action:none that headless-ui keeps applying to these elements.

html, body {
  /* prevent headless-ui/react bug from applying touch-action:none to these elements */
  touch-action: auto !important
}