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

[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.

[dbismut]

Use { pointer: { touch: true } } option to avoid using touch-action. This will use TouchEvents instead of PointerEvents which require touch-action to be set.

Docs: https://use-gesture.netlify.app/docs/options/#pointertouch