search

emilkowalski / vaul

A drawer component for React.
https://vaul.emilkowal.ski
MIT License
6.45k stars 215 forks source link

Drawer is unusable on a standalone installed PWA #505

Open smhutch opened 2 weeks ago

smhutch commented 2 weeks ago

Drawer content is unusable when:

  1. The app has a manifest.json with "display": "standalone",
  2. The user installs the app on iOS
  3. A sheet is rendered below the fold on a page (interestingly it works fine if you are scrolled to the top)

Recording of issue

https://github.com/user-attachments/assets/623a1ece-b120-4e5b-8255-e2c3fef6e585

In this recording I:

  1. Have installed the app on iOS
  2. Open the Drawer at the top of the page. I can interact with it as normal and click on the button to show the alert.
  3. Scroll to the bottom, and open the problematic Drawer (same component as above).
  4. First issue is that the body scrolls back to the top (you can see that behind the drawer)
  5. Second issue is that if I interact with the drawer in any way it instantly closes

Minimal repro

  1. App showing the bug
  2. Repo with minimal repro
smhutch commented 1 week ago

@emilkowalski what's the purpose of this condition? I found that removing it fixed the issues we have been seeing on a standalone PWA. I assume it has some purpose though.

hiroingk commented 1 week ago

The same issue is occurring in iOS app WebViews, not just PWAs. As a workaround, we resolved it by setting the WebView's User Agent to match Safari's UA as shown in the link below: https://www.whatismybrowser.com/guides/the-latest-user-agent/ios However, we hope it can be made to work without depending on the UA.