useDialog: Pinch-to-zoom on iOS

[backflip]

🐛 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.

1. Before opening:

2. After opening and focussing a field:

3. 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

Software	Version(s)
react-spectrum	Current version on the official demo page
Browser	Latest Safari on iOS 14.4.2
Operating System	iOS 14.4.2

[LFDanLu]

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.

[snowystinger]

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

[backflip]

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.

Oh my, this looks rather tricky. Thanks for digging into it!

[devongovett]

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.

[devongovett]

It should be noted that zooming is still possible via the buttons in the toolbar, which is actually more similar to how desktop browsers behave anyway. Rather than cropping the viewport, it actually affects the layout of the app.

[backflip]

It should be noted that zooming is still possible via the buttons in the toolbar

Good point, did not think of that. Do you know whether similar controls exist in "WebKit wrappers" like Chrome on iOS, too?

[Haakam21]

Any progress on this? Still an issue to this day