Open FacundoTenuta opened 3 months ago
I ran into this same issue and confirmed it is an issue with @react-aria/overlays
. You can verify this by clicking 'Open modal' on the demo page using an iPhone. Here's an issue in the React Spectrum Github that notes the same issue.
The general consensus is that if the modal contains form elements, make the form field font size 16px to prevent auto-zoom on iPhone, preventing any scenarios where users will be unable to zoom out. Not suggesting this as a workaround as it's a hack, just wanted to provide this information.
For anyone that is looking to change the font size to prevent the automatic zoom for iPhones, you can do something like this in your tailwind.config.js
:
nextui({
layout: {
// Modifying the font size and line height so iPhone users don't automatically zoom in when focusing on an input field
// These are based on the Tailwind values, but we are off by one. EX: NextUI 'small' = Tailwind 'medium' https://tailwindcss.com/docs/font-size
fontSize: {
tiny: '0.875rem',
small: '1rem',
medium: '1.125rem',
large: '1.25rem',
DEFAULT: '1.125rem',
},
lineHeight: {
tiny: '1.25rem',
small: '1.5rem',
medium: '1.75rem',
large: '1.75rem',
DEFAULT: '1.75rem',
},
},
})
NextUI Version
2.4.6
Describe the bug
When I open a modal from an iPhone, it does not allow me to use the pinch to zoom gesture. My use case is for images in a modal.
When we have text with scrolling, it works but only within the text container. The behavior remains strange, and if there is no scrolling, the gesture does not work.
Perhaps the error is from React Aria.
Your Example Website or App
No response
Steps to Reproduce the Bug or Issue
Expected behavior
When you open the modal and try to pinch to zoom, the gesture should work perfectly
Screenshots or Videos
No response
Operating System Version
IOS 17
Browser
Chrome