iOS: scroll lock should still allow pinch-to-zoom #3602
Closed
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
Merott
added a commit
to Merott/headlessui
that referenced
this pull request
Apr 14, 2025
|
I need this too. The fix appears to be more involved than this, though. Specifically, it seems like we still need to detect a pinch gesture with JavaScript and return early from the See these changes. |
|
Hey! Thanks for the PR. I solved this in another way in #3801 where we weren't properly resetting the I included 2 videos in the PR to see the behavior differences. This should be enough to fix this issue. It will be available in the next release. You can already try it using:
|
pull bot
pushed a commit
to TheRakeshPurohit/headlessui
that referenced
this pull request
Sep 19, 2025
…#3801) This PR fixes an issue where if you have an open Dialog on iOS that once you interacted with an area otuside of the dialog, you could no longer scroll or zoom the dialog itself anymore until it closed and reopened. The reason this was happening is that on `touchstart` we checked whether we are in an allowed area or not. - If we are in an allowed area, add `overscroll-behavior: contain` to the scrollable area to prevent scrolling the body behind it. - If we are not in an allowed area, add `touch-action: none` to the element you were touching to prevent any other touch events from being fired. The problem with this is that we never reset the state until the dialog is closed (and eventually unmounted). So to solve the problem, every time we get a `touchstart` event, we reset those CSS properties to their previous values, and then check again whether we are in an allowed area or not. Note: the `touchstart` event listener is set on the document itself, so we still get the event even if `touch-action: none` was set on the target element. ## Test plan Made 2 videos with a before / after comparison. The reproduction used is from tailwindlabs#3234. The steps I'm applying here are: 1. Open the dialog by tapping on the toggle button 2. Scroll inside the dialog 3. Pinch to zoom inside the dialog 4. Tap outside / scroll outside the dialog to show that you can't with the outside 5. Scroll inside the dialog again 6. Pinch to zoom inside the dialog again **Before:** 1. ✅ Open the dialog by tapping on the toggle button 2. ✅ Scroll inside the dialog 3. ✅ Pinch to zoom inside the dialog 4. ✅ Tap outside / scroll outside the dialog to show that you can't with the outside 5. ❌ Scroll inside the dialog again 6. ❌ Pinch to zoom inside the dialog again https://github.com/user-attachments/assets/d79d9794-3732-4201-a4c9-43ea36d302ce **After:** 1. ✅ Open the dialog by tapping on the toggle button 2. ✅ Scroll inside the dialog 3. ✅ Pinch to zoom inside the dialog 4. ✅ Tap outside / scroll outside the dialog to show that you can't with the outside 5. ✅ Scroll inside the dialog again 6. ✅ Pinch to zoom inside the dialog again https://github.com/user-attachments/assets/f6c1c765-3c8c-4d3c-91c2-1b43507f6434 Fixes: tailwindlabs#3234 Closes: tailwindlabs#3602
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Some components require scroll-locking for accessibility purposes; however, it seems that on iOS, this scroll locking was going one step too far, and preventing users from being able to use the pinch-to-zoom gesture. Pinch-to-zoom is important, especially for people with low vision conditions; zooming in helps them read and understand the web page.
On iOS, we we are using the
touch-actionCSS property to disable scrolling around the page. However, instead of setting this property tononeto disable all touch interaction, we can set it topinch-zoom, which should disable all scrolling touch interactions, but still allow the user to zoom in and out as necessary.I discovered this accessibility issue when trying to use a
<Dialog>component from Headless UI. The dialog showed an image, and I wanted to zoom in on the image in order to view it in greater detail, but I discovered that I could not. This change fixes that problem.