Skip to content

touch-action: pan-y prevents L shaped gestures to scroll #639

@Linksku

Description

@Linksku

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: none to the draggable element.

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions