emilkowalski / vaul

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

Drawer lags while closing with swipe, when there is a more content on the page #475

Open afkcodes opened 1 month ago

afkcodes commented 1 month ago

There is good amount of content on the page, the drawer opens fine it open smoothly but while closing it lags, Note: All the interactions are swipe

https://github.com/user-attachments/assets/5da85140-c325-4ff4-a1c9-6de7d89f84fd

emilkowalski commented 1 month ago

Can you provide a demo with reproduction?

afkcodes commented 1 month ago

sure will create a demo

PlagueFPS commented 1 month ago

Yes, I am experiencing this as well, only on close.

afkcodes commented 1 month ago

here is the reproducible: https://github.com/afkcodes/sunoh-pwa/ this is the project and demo: https://sunoh-virid.vercel.app check it on mobile @emilkowalski

T-Damer commented 3 weeks ago

Same for me, swipe to close is laggy on iOS and Android (touch devices, I guess), but works fine on mouse-input devices I am not sure if it's connected to the amount of elements on the page or inside the modal

T-Damer commented 3 weeks ago

https://github.com/user-attachments/assets/77d5c8dd-71df-4fd7-926d-e39ab2a43ef6

Here's the demo with simple modal, it uses the Root, Portal, Overlay, Content, Handle, Close elements Content is fixed bottom-0 left-0 right-0

T-Damer commented 3 weeks ago

I recorder DOM mutatitions, looks like tranlate3d updates to higher position on second frame

1 2 3 4
CleanShot 2024-10-26 at 19 05 25@2x CleanShot 2024-10-26 at 19 06 26@2x CleanShot 2024-10-26 at 19 06 36 2@2x CleanShot 2024-10-26 at 19 06 58@2x
T-Damer commented 3 weeks ago

Removing snapPoints fixes the issue, so I guess it's something about snapping