iOS issues with snap points + modal=false (bg interact-able) + non-dismissable + scroll

[sgup]

Hi,

could you please create an example with a drawer that:

• is non-dismissable
• has multiple snap points (even 2, minimized and full)
• has scrollable content
• allows the user to interact with bg elements?

for context, I'm trying to build a similar UI to apple maps. I'm able to get it working on chrome/desktop and tested with smaller windows, but it doesn't work on an iOS device or simulator.

Thank you

[joaom00]

What exactly is not working on iOS?

[sgup]

the interactions were janky / broken on iOS with the above settings. When trying to close it was dragging the page instead, and also the bg stuff wasn't interactable. I was able to hack around it with:

body {
  pointer-events: auto !important;
}

and wrapping the drawer with

 <div className="touch-none overflow-hidden"> drawer </div>

Next I'm trying to render a nested drawer / layered drawers with all those settings, really pushing your lib here 😆

[joaom00]

Have you tried using modal={false} to make background elements interactable?

When trying to close it was dragging the page instead, and also the bg stuff wasn't interactable

Could you create a reproducible example for me to take a look at? thanks in advance

[sgup]

with modal={false} it does allow things to be interactive under it, but the dragging to close doesn't work properly on iOS with all the mentioned settings:

• is non-dismissable
• has multiple snap points (even 2, minimized and full)
• has scrollable content

I'll get back to you with a good example