search

emilkowalski / vaul

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

Fix position fixed causing layout shifts on standalone sites (pwa) #277

Closed Cuzart closed 5 months ago

Cuzart commented 7 months ago

I simply added a new condition to only call setPositionFixed when display mode is set to standalone like in most PWA's.

Solves #199 where you can find more details about the problem. I personally don't think this needs an extra prop for more control over this behaviour but maybe there is a good reason for including one?

vercel[bot] commented 7 months ago

@Cuzart is attempting to deploy a commit to the emil Team on Vercel.

A member of the Team first needs to authorize it.

Dearest commented 7 months ago

Disappointed, this PR didn't solve the issue #199 . In the iOS app's webview, the return value of executing window.matchMedia('(display-mode: standalone)').matches is false.

Cuzart commented 7 months ago

Well it solves the issue for pwa's. For native app's with webviews the condition is not met you're right I somehow missed that point of the discussion tbh as my main goal was to fix it for pwa which affected my own app.

I tried to add another condition to avoid setting position fixed on webview's const isWebView = /(iPhone|iPod|iPad).*AppleWebKit(?!.*Safari)/i.test(navigator.userAgent); found here

but the safe inset on the bottom is still there. Not sure if this is because of the preview in Xcode or the view needs some styling or configuration but the bottom inset is always visible independent from the drawer. (I am no swift dev)

If wanted I could add this second condition to the PR :)

https://github.com/emilkowalski/vaul/assets/60718229/ce4daa7d-a14a-451f-9ce7-d544c61dcb9d

This is a xcode simulator preview with a WKWebView rendering the localhost dev server from running npm run dev:test (I add a absolute positioned element to the body when the condition is met to see if it catches determining whether the user agent runs in a webview)