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:
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-yto 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-ddd7fca8defbe3f84e818a98d9b3e5f2ad455b374eb1cc0c9c9ff026db9a8259R42I'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-yto 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 withouttouch-action: pan-y?Information:
Checklist:
touch-action: noneto the draggable element.