chore(deps): update drawer to diadem-vaul-svelte + mobile/scout interaction fixes#75
Open
roundaboutluke wants to merge 6 commits intoccev:mainfrom
Open
chore(deps): update drawer to diadem-vaul-svelte + mobile/scout interaction fixes#75roundaboutluke wants to merge 6 commits intoccev:mainfrom
roundaboutluke wants to merge 6 commits intoccev:mainfrom
Conversation
Only force "pointer-events-none!" on non-iOS (mobile WebKit keeps the default behavior to avoid breaking scroll).
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
This PR switches Diadem’s mobile drawer to diadem-vaul-svelte, a parity port of vaul-svelte updated for the latest Bits UI/Melt stack. Alongside the dependency swap it fixes a few real-world mobile interaction issues - particularly around map panning behind the drawer and Scout specific issues, while keeping the drawer’s look/feel consistent.
Key points:
Replaces vaul-svelte with diadem-vaul-svelte, fixing several issues (most notably being able to edit filter names on mobile)
iOS Scout fix: removes the “invisible wall” interaction when the Scout drawer is open so the map remains pannable above it.
Scout UX: prevents accidental drawer drag/close while adjusting the Scout size slider (data-vaul-no-drag)
Scout UX: fixes a brief jump/flash during close by keeping the Scout menu rendered until the drawer’s close animation completes (prevents it appearing at the top for a split second before disappearing - unsure if this was a Webkit only issue?)
Chrome fix: applies a targeted pointer-events workaround so the fullscreen drawer layer doesn’t block panning the map behind Profile/Filters
WebKit pointer-events consideration: we intentionally avoid forcing the pointer-events override on iOS/mobile WebKit because it breaks drawer scrolling; Scout panning on WebKit works because there is no scrolling there to worry about conflicts. I have tried several different ways to implement this and the trade offs are never worth it, happy for someone else to attempt this in the future - but I figure as scout works it's not a huge issue to accept this as a mobile WebKit limitation without impacting functionality on less fussy browsers for now.
This should resolve nearly all issues with drawer interactions on iOS, but will require further testing to ensure it hasn't broken anything on real android devices (only tested in emu).
Note: Chrome visual issues when scrolling the drawer likely remain and need to be scoped and fixed separately while keeping in mind the above fixes largely targeting mobile WebKit.