I have a scrollable page with a sidebar that can be opened by swiping from the left. The swipe gesture is handled by "@use-gesture". The library requires setting touch-action: pan-y on the scrollable element so horizontal swipes aren't handled by the OS. The scrolling and swipeable sidebar both work with touch-action: pan-y.
However, there's a known issue with touch-action: pan-y in mobile Chrome and Firefox where if you start swiping horizontally, then switch to swiping vertically without lifting your finger in between, the vertical swipe is ignored: https://www.w3.org/2020/07/22-pointerevents-minutes.html#item02. This is an issue when the user is trying to swipe vertically, but they start off the gesture diagonally, so the OS considers it a horizontal swipe and they're unable to scroll vertically.
Since my webapp's sidebar opens only if you swipe in from the left, I only need touch-action: pan-y on the left edge of the page. It's fine if some attempts to scroll don't work if the user swipes on the left edge of the page, but most of the page is still scrollable normally. Is there some hack to not need touch-action: pan-y on the rest of the page? I tried using a position: fixed element, but it'll also swallow events on elements under the fixed element. I also tried adding/removing touch-action based on where the gesture begins, but the browser ignores any changes to touch-action once the gesture already started. Any ideas to try would be appreciated.