Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Safari iOS scrollable drawer bug #162

Closed
tommybarvaag opened this issue Nov 8, 2023 · 3 comments
Closed

Safari iOS scrollable drawer bug #162

tommybarvaag opened this issue Nov 8, 2023 · 3 comments

Comments

@tommybarvaag
Copy link

tommybarvaag commented Nov 8, 2023

Hi, frist and foremost thanks for this awesome package.

I noticed a weird bug/error state on scrollable drawers where reopening drawers produces a state where drawers are immediately dismissed on interaction. The error state seems to only activate on drawers that appear in the bottom portion of the list.

I have forked your example "Drawer scrollable" and extended it with ten entries with drawers to create a scrollable layout of items. The reproduction sandbox can be found here https://codesandbox.io/p/sandbox/drawer-scrollable-forked-gsm68l

Reproduction steps

  1. Scroll to bottom and click "Open drawer 9"
  2. Interact with the drawer and drag to close
  3. Click to open "Open drawer 9" again
  4. Make a small scroll downwards and wait for scroll to finish
  5. Click anywhere within the Drawer Content and the Drawer dismisses immediately. The drawer is also now unscrollable

Video to show how to reproduce

vaul-safari-ios-scroll-bug.mp4

I don't know which version you use on vercel.com, but there seem to be a drawer issue on the /overview page on Safari iOS when you have many projects and scroll to the bottom as well. Maybe it's hard to see in the video, but I'm trying to attempt to close the drawer by pulling it down.

vercel-safari-ios-bug.mp4
@emilkowalski
Copy link
Owner

This should be fixed now by #167 and #154. Please ping me if you still experience this issue after I release a new version.

@tommybarvaag
Copy link
Author

tommybarvaag commented Nov 10, 2023

Hi @emilkowalski. I hope you meant a tag when you said to "ping" you. My apologies if I misunderstood.

I upgraded my reproduction to the 0.7.9 release https://gsm68l-3000.csb.app and I still get the same behaviour.

It seems that reopening a drawer at the bottom of the page forces an error state in the drawer like I described in the first post. Once the error state occurs it persists for all drawers. But if I scroll to the top of the page again then the drawer will escape the error state.

To force the error state

  1. Scroll to bottom and click "Open drawer 9"
  2. Interact with the drawer and drag to close
  3. Click to open "Open drawer 9" again
  4. Make a small scroll downwards and wait for scroll to finish
  5. Click anywhere within the Drawer Content and the Drawer dismisses immediately. The drawer is also now unscrollable
vaul-safari-ios-scroll-bug-v2.mp4

@tommybarvaag
Copy link
Author

tommybarvaag commented Nov 10, 2023

Upon further exploration it seems that every odd open count resolves in an error state and every even open count will work fine. Hope this helps.

It's also worth mentioning that as long as I keep scrolling it won't enter the error state.

Adding a title and some lorem ipsum to your scrollable example to force scroll on the y axis also triggers this bug. You can test this forked sandbox https://dwvz68-3000.csb.app/

  1. Scroll to the bottom and click "Open Drawer"
  2. Interact with he drawer and drag to close
  3. Open the drawer again
  4. Make a short downwards scrolll and wait to scroll to finish
  5. Click anywhere within the drawer and the drawer will dismiss immediately
vaul-safari-ios-scroll-bug-v3.mp4

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants