-
Notifications
You must be signed in to change notification settings - Fork 1.1k
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
useDialog: Pinch-to-zoom on iOS #1898
Comments
Did some digging, looks like https://github.com/adobe/react-spectrum/blob/main/packages/@react-aria/overlays/src/usePreventScroll.ts#L50 is blocking pinch zooming. Will have to dig into this code to see if there is a way to resolve this without removing the background window scroll blocking. |
Maybe it will include the ctrl key as noted in this function https://github.com/adobe/react-spectrum/blob/main/packages/@react-aria/interactions/src/useScrollWheel.ts#L25 |
Oh my, this looks rather tricky. Thanks for digging into it! |
I think we can fix the issue in the docs by making the font size on the input elements larger so it doesn't zoom. As for zoom, that will be very challenging. |
Good point, did not think of that. Do you know whether similar controls exist in "WebKit wrappers" like Chrome on iOS, too? |
Any progress on this? Still an issue to this day |
🐛 Bug Report
I'm unable to use the pinch-to-zoom gesture to zoom in or out when a dialog is opened.
🤔 Expected Behavior
The default browser behavior of zooming in and out should work within a dialog as the content might become inaccessible otherwise.
😯 Current Behavior
On the demo page, focussing a field inside the dialog on my iPhone will automatically zoom in (as the input font size is below 16px) but I'm unable to zoom out. When starting the gesture outside of the dialog, it will close, when starting within, nothing happens.
Before opening:
After opening and focussing a field:
After attempting to reduce the zoom level by starting pinch-to-zoom outside of the dialog:
💁 Possible Solution
I would assume that some touch event listeners are interfering with the default behavior.
🔦 Context
The dialog context might become inaccessible either by cutting it off when auto-zooming or by simply being to small to be readable (where default pinch-to-zoom behavior would solve the problem).
💻 Code Sample
https://react-spectrum.adobe.com/react-aria/useDialog.html
🌍 Your Environment
The text was updated successfully, but these errors were encountered: