search

huntabyte / vaul-svelte

An unstyled drawer component for Svelte.
https://vaul-svelte.com
MIT License
395 stars 16 forks source link

Scrollable drawers have a bad frame rate when dragging #44

Open RickRyan26 opened 5 months ago

RickRyan26 commented 5 months ago

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 commented 5 months ago

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 commented 5 months ago

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

TGlide commented 5 months ago

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

https://github.com/huntabyte/vaul-svelte/assets/26071571/74a8ede4-0563-4878-98f3-e00501736b01

huntabyte commented 5 months ago

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

RickRyan26 commented 5 months ago

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 commented 5 months ago

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 commented 5 months ago

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