search

vuetifyjs / vuetify

🐉 Vue Component Framework
https://vuetifyjs.com
MIT License
39.89k stars 6.97k forks source link

[Bug Report][3.6.7] Navigation Drawer Swipe Glitch #19874

Open ErikliPizza opened 5 months ago

ErikliPizza commented 5 months ago

Environment

Vuetify Version: 3.6.7 Vue Version: 3.4.27 Browsers: Google Chrome, Chrome 123.0.0.0, Mozilla Firefox OS: Android

Steps to reproduce

just try to swipe a simple navigation drawer on your mobile device.

Expected Behavior

Swipe&Open the sidebar/navigation drawer smoothly.

Actual Behavior

Items teleporting while swiping.

Reproduction Link

https://play.vuetifyjs.com/#...

Other comments

Tested on two different mobile device: Oppo A55 (CPH2325) Xiaomi Redmi Note 10S

ps: There is no glitch if I open the drawer via click. Example

joshas commented 2 months ago

Same issue here on Android 9 device and in Firefox 129.0.2 (64-bit) using "Responsive Design Mode" to open drawer with swiping using "Touch Simulation". Opening navigation drawer with finger swipe displays last frame (drawer open) first, then goes back to start and continues to follow touch position. Issue also can be reproduced in Vuetify website, when opening navigation drawer with finger swipe.

Update: after testing older Vuetify versions in playground, I found that bug was introduced in v3.5.17. Only two bug fixes were made related to VNavigationDrawer component, so it should be easy to find and fix the issue.

ErikliPizza commented 2 months ago

Same issue here on Android 9 device and in Firefox 129.0.2 (64-bit) using "Responsive Design Mode" to open drawer with swiping using "Touch Simulation". Opening navigation drawer with finger swipe displays last frame (drawer open) first, then goes back to start and continues to follow touch position. Issue also can be reproduced in Vuetify website, when opening navigation drawer with finger swipe.

Update: after testing older Vuetify versions in playground, I found that bug was introduced in v3.5.17. Only two bug fixes were made related to VNavigationDrawer component, so it should be easy to find and fix the issue.

Thanks for confirming the issue and for the detailed breakdown. I switched to Quasar because of performance issues like this. Quasar is great, but I still think Vuetify has a more polished look overall. I hope the Vuetify team can fix the performance issues and not abandon it to die.