Skip to content
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

Open
backflip opened this issue May 9, 2021 · 7 comments · May be fixed by #7012
Open

useDialog: Pinch-to-zoom on iOS #1898

backflip opened this issue May 9, 2021 · 7 comments · May be fixed by #7012
Labels
documentation Improvements or additions to documentation

Comments

@backflip
Copy link

backflip commented May 9, 2021

🐛 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:
    IMG_1266

  2. After opening and focussing a field:
    IMG_1267

  3. After attempting to reduce the zoom level by starting pinch-to-zoom outside of the dialog:
    IMG_1268

💁 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
Copy link
Member

LFDanLu commented May 13, 2021

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.

@LFDanLu LFDanLu added the bug Something isn't working label May 13, 2021
@snowystinger
Copy link
Member

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
Copy link
Author

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
Copy link
Member

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
Copy link
Member

devongovett commented May 13, 2021

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
Copy link
Author

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?

@LFDanLu LFDanLu added documentation Improvements or additions to documentation and removed bug Something isn't working labels May 19, 2021
@tomdohnal tomdohnal linked a pull request Sep 9, 2024 that will close this issue
5 tasks
@Haakam21
Copy link

Any progress on this? Still an issue to this day

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
documentation Improvements or additions to documentation
Projects
None yet
5 participants