-
Notifications
You must be signed in to change notification settings - Fork 327
Description
Describe the bug
On most vertically scrollable elements on mobile, when you swipe horizontally, then vertically in a reverse L shape pattern, it can scroll vertically. However, if you add touch-action: pan-y to the element, it no longer allows the scroll. This commonly occurs when the user attempts to scroll vertically, but they start off the gesture diagonally, so the browser considers it a horizontal swipe and prevents vertical scrolls.
I know this isn't a bug with @use-gesture, it seemed like a browser bug, but I think it's expected behavior for touch-action: pan-y. This test expects the page to be not scrollable after a horizontal, then vertical swipe: https://github.com/web-platform-tests/wpt/pull/40464/files#diff-ddd7fca8defbe3f84e818a98d9b3e5f2ad455b374eb1cc0c9c9ff026db9a8259R42
I'd assume this is a common issue with people using @use-gesture, is there a good solution? If I add touch-action: pan-x pan-y to the swipeable element, it fixes the scrolling issue, but then the swipe gesture doesn't work. I have a vertically scrollable feed with a sidebar that can be opened by swiping in from the left. I don't know how exactly @use-gesture and touch-action work, but why can't @use-gesture make the sidebar swipeable without touch-action: pan-y?
Information:
- Use Gesture version: @use-gesture/react: ^10.2.27
- Device: Pixel 5
- OS: Android 14
- Browser: Chrome
Checklist:
- I've read the documentation.
- If this is an issue with drag, I've tried setting
touch-action: noneto the draggable element.