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

Disable smooth scrolling when opening/closing Dialog components on iOS #2635

Merged
merged 4 commits into from Aug 2, 2023

Conversation

RobinMalfait
Copy link
Collaborator

This PR improves the Dialog opening/closing behavior on iOS if you enabled scroll-behavior: smooth;

For iOS workaround related purposes we have to capture the scroll position and offset the margin top with that amount and then scrollTo(0,0,) to prevent all kinds of funny UI jumps.

However, if you have scroll-behavior: smooth enabled on your html, then offseting the margin-top and later scrollTo(0,0) would be handled in a smooth way, which means that the actual position would be off.

To solve this, we disable smooth scrolling entirely in order to make the position of the Dialog correct. This shouldn't be a problem in practice since the page itself isn't suppose to scroll anyway.

Once the Dialog closes we reset it such that everything else keeps working as expected in a (smooth) way.

Fixes: #2522

@vercel
Copy link

vercel bot commented Aug 2, 2023

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

Name Status Preview Comments Updated (UTC)
headlessui-react ✅ Ready (Inspect) Visit Preview 💬 Add feedback Aug 2, 2023 3:42pm
headlessui-vue ✅ Ready (Inspect) Visit Preview 💬 Add feedback Aug 2, 2023 3:42pm

For iOS workaround related purposes we have to capture the scroll
position and offset the margin top with that amount and then
`scrollTo(0,0,)` to prevent all kinds of funny UI jumps.

However, if you have `scroll-behavior: smooth` enabled on your `html`,
then offseting the margin-top and later `scrollTo(0,0)` would be
handled in a smooth way, which means that the actual position would be
off.

To solve this, we disable smooth scrolling entirely in order to make the
position of the Dialog correct. This shouldn't be a problem in practice
since the page itself isn't suppose to scroll anyway.

Once the Dialog closes we reset it such that everything else keeps
working as expected in a (smooth) way.
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.

scrollBehavior: "smooth" causes unintentional scroll on dialog open/close.
1 participant