Drawer sometimes becomes unresponsive on iPhone when Safari is set to "Tab Bar" option

[hamishtaplin]

On iPhone (when using "Tab Bar" setting - ie. the tab/address bar is at the bottom of the screen) opening the drawer on a page where the user has scrolled down causes it to become almost completely unresponsive. It cannot be dismissed and you cannot interact with its children (eg. radio buttons).

Steps to reproduce

• drawer configured with defaults (so that it can be swiped to close)
• on a real iPhone (not simulator)
• in Safari settings use "Tab Bar" option
• on a page with content that is longer than the viewport height
• scroll to bottom of page
• open drawer
• most of the time the drawer is now unresponsive

Example

Here's a reproducible example

Codesandbox

Additional info

• using dismissible={false} makes the drawer responsive to touch but obviously can't be swiped closed anymore
• the restoration of scroll position is also janky (you can see this in the example, the "open drawer" button isn't always in the same position when you close the drawer)

[erikdroh]

Can add that this only seems to be an issue for iOS versions over 17.5 (since Safari is updated with iOS updates)

The criteria for it not working seems to be

• Safari settings use "Tab Bar" option
• iOS version above ~17.5

All other browsers seems to work fine.

[Rainase]

Will this be fixed by any chance ?

[Adam-Collier]

Also experiencing this issue, any of you find a fix for this?

[Adam-Collier]

After using the below it seems to be working for me as expected:

<Drawer
    open={open}
    onOpenChange={handleOnOpenChanged}
    direction='bottom'
    handleOnly={true}
    scrollLockTimeout={100}
    disablePreventScroll
  >
      <-- content -->
</Drawer>

I think a big contributor here was the scroll prevention, hope this can help!

[emilkowalski]

This should be fixed in #406