Scrollable drawers have a bad frame rate when dragging

[RickRyan26]

Describe the bug

This is happening on in Chrome on Android and destroys the silky smooth authentic.

Any thoughts on a fix?

Reproduction

The scrollable example has the problem

Logs

No response

System Info

Android

Severity

annoyance

[huntabyte]

What are the specs of the phone? Is anyone else experiencing this issue?

I'm running the latest iPhone so it wont mean much when I say it's smooth on my end.

I know @TGlide has an Android - are you able to reproduce this experience https://vaul-svelte.com/examples ?

[RickRyan26]

Using a Pixel 7 pro. It happens when the scroll leads into the drag down

[TGlide]

Yes, I can reproduce. Pixel 7 here, happening on FF and Chrome

screen-20240202-083925.mp4

[huntabyte]

Thanks man! @TGlide - will look into this one!

[RickRyan26]

I appreciate it!

Also when I load up a non-scrollable drawer with a lot of elements it negatively affects the drag's frame rate on my phone as well, BUT when that same drawer is triggered to open/close the animation is back to seamless. Why is that? I'm having trouble wrapping my head around it 😕

[huntabyte]

I'm pretty sure I know what introduced the issue. On certain devices/browsers when using mobile devices, pointerup isn't fired when there is scrollable content on a "long press and drag", so I added touch listeners to cover those cases. It seems that is causing some issues on your end as I'd bet both are firing and conflicting with one another, causing the lagginess to occur.

I'm looking into this now.

[RickRyan26]

Brilliant idea. Hope you can detect if both exist and disable one if so