iOS: scroll lock should still allow pinch-to-zoom

[singingwolfboy]

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-action CSS property to disable scrolling around the page. However, instead of setting this property to none to disable all touch interaction, we can set it to pinch-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.

[vercel[bot]]

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	Jan 1, 2025 11:41am
headlessui-vue	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jan 1, 2025 11:41am

[Merott]

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 touchmove handler if we do.

See these changes.

[RobinMalfait]

Hey! Thanks for the PR. I solved this in another way in #3801 where we weren't properly resetting the touch-action. The touch-action was only set on elements outside the dialog and not the dialog itself.

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:

• npm install @headlessui/react@insiders.