Drawer is unusable on a standalone installed PWA

[smhutch]

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

ScreenRecording_11-06-2024.15-08-49_1.mov

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]

@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]

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.

[Lovresqu]

at removing it fixed the issues we

@smhutch How did you remove it?

[kailoklum]

yep can confirm this behaviour on iOS as well using React Native's Webview. Temporary workaround by changing the user agent for webview works.

[nano72mkn]

Setting repositionInputs to false solved it for me!

[smhutch]

@smhutch How did you remove it?

@Lovresqu I forked the library locally as a test. I didn't put this change into production, was just debugging to try to understand the problem a bit more.