iOS: scroll lock should still allow pinch-to-zoom #3602
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. |
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.