Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improve iOS scroll locking #1830

Merged
merged 2 commits into from Sep 7, 2022
Merged

Improve iOS scroll locking #1830

merged 2 commits into from Sep 7, 2022

Conversation

RobinMalfait
Copy link
Collaborator

@RobinMalfait RobinMalfait commented Sep 7, 2022

This isn't super ideal, but just preventing the default behavior on the
entire document while touchmove-ing isn't ideal either because then
you can't scroll inside the dialog or on the backdrop if your dialog
panel is larger than the viewport.

Again, this is not 100% correct, but it is better because you will be
able to scroll the dialog, and not the body.

Fixes: #1831

@vercel
Copy link

vercel bot commented Sep 7, 2022

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Updated
headlessui-react ✅ Ready (Inspect) Visit Preview Sep 7, 2022 at 10:31AM (UTC)
headlessui-vue ✅ Ready (Inspect) Visit Preview Sep 7, 2022 at 10:31AM (UTC)

This isn't super ideal, but just preventing the default behavior on the
entire document while `touchmove`-ing isn't ideal either because then
you can't scroll inside the dialog or on the backdrop if your dialog
panel is larger than the viewport.

Again, this is not 100% correct, but it is better because you will be
able to scroll the dialog, and not the body.
@Tinoooo
Copy link

Tinoooo commented Oct 12, 2022

Thank you for improving this. This fixed the following bug for me.

Input elements of the type range could hardly be used by touch devices.

with headlessui/vue@1.7.0:
not working
try here

with headlessui/vue@1.7.1:
works
try here

I am mentioning this, because it took me a long time to find out that the reason for my particular problem was the scroll locking. Maybe somebody with a similar issue will find my comment 😉.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Dialog's children doesn't scroll anymore (React)
2 participants