search

emilkowalski / vaul

An unstyled drawer component for React.
https://vaul.emilkowal.ski
MIT License
5.29k stars 170 forks source link

Mobile Safari: Unable to open Drawer #246

Open GalvinGao opened 5 months ago

GalvinGao commented 5 months ago

Reproduce Link

https://codesandbox.io/p/devbox/drawer-with-scale-forked-764l2f

How to Reproduce

  1. Open up the reproduce codesandbox
  2. Navigate the built app link on mobile safari
  3. Scroll to at least 15# drawer
  4. You should observe that after clicking the drawer trigger nothing happens.

Speculations

By inspecting in the Safari Inspector I can see that the drawer was indeed created but it was then unmounted almost instantly. I then went into the code base and found this. If after clicking the trigger the page is automatically scrolled to (0, 0) then Virtuoso will unmount the drawer trigger along with the drawer content altogether since it is now out of the viewport. This behavior is further confirmed by scroll down the page a tiny bit (to let drawer 1~2 trigger be the top-most visible drawer trigger) then click any drawer triggers. You may observe from the overlay/backdrop that the page itself is indeed scrolled to (0, 0).

Potential Solutions

I don't know the consequences of removing window.scrollTo(0, 0) altogether, but it seems that removing it may solve the issue.

emilkowalski commented 5 months ago

Think you included the wrong demo, this doesn't have Virtuoso

GalvinGao commented 5 months ago

Thanks for the reply! The corresponding file is located at app/page.tsx. Please refer to the screenshot below.

image

Edit: Sorry for the confusion, I've updated the link to the correct one.

asobirov commented 4 months ago

Did you find any solutions to this?

GalvinGao commented 3 months ago

Did you find any solutions to this?

Not yet. Tried forking vaul and modify myself (specifically scroll restorations) but haven't successfully fixed it myself yet.