[BUG] - Pinch to zoom not work on Modal

[FacundoTenuta]

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

1. Open modal on iphone.
2. Try pinch to zoom gesture

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

[linear[bot]]

ENG-1196 [BUG] - Pinch to zoom not work on Modal

[maxtondelaney]

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',
        },
      },
    })