Swiping too hard causes the whole viewport unclickable

[vincentsartoko]

Describe the bug When using useDrag where velocity is greater than 1, there is a moment where you cannot click anywhere else. The behaviour is similar to clicking a shadow overlay that doesn't register anything, and everything seems fine after you click this shadow overlay. This also happens on the official site of use-gesture, take a look at the video below.

Sandbox or Video Here is the bug on the use-gesture website:

https://github.com/user-attachments/assets/dd7e2b74-fb9b-44bf-940a-bd44a4ac6610

Here is the detailed console.log on my app:

import { useSpring, animated } from '@react-spring/web';
import { useDrag } from '@use-gesture/react';

export default function Component() {
  const [{ x, y }, api] = useSpring(() => ({ x: 0, y: 0 }));

  const bind = useDrag(({ down, movement: [mx, my], velocity }) => {
    if (!down) console.log(`Click inside useDrag with velocity: ${velocity}`); // Log inside useDrag
    api.start({ x: down ? mx : 0, y: down ? my : 0, immediate: down });
  });

  return (
    <div>
      <animated.div
        {...bind()}
        onClick={() => console.log('Click inside onClick')} // Log when click
        style={{ x, y, width: 100, height: 100, background: 'red', touchAction: 'none' }}
      />
    </div>
  );
}

https://github.com/user-attachments/assets/872604f0-0e3a-4b5a-bee4-674e49fddc42

Information:

• Use Gesture version: 10.3.1
• Device: Mobile web / Webview
• Browser: Google Chrome

Checklist:

• [X] I've read the documentation.
• [x] If this is an issue with drag, I've tried setting touch-action: none to the draggable element.

[dbismut]

Are you able to reproduce this outside of the inspector (ie real device)?

[vincentsartoko]

Are you able to reproduce this outside of the inspector (ie real device)?

Yes, I deployed on production as a webapp, and an Android webview through CapacitorJS.

[dbismut]

The example from the docs you're referring to and showing in the issue: are you able to reproduce this on a real device with a normal browser?

[vincentsartoko]

@dbismut Yes I could reproduce it on my phone, and some of our users. How about from your side?

[dbismut]

No, I can't, hence why I'm asking. I'm using an iPhone 15 Pro and Safari. Reason why I'm asking about context and devices is because I think it might be related to pointer capture but there's no reason why it wouldn't work normally on regular devices.

[vincentsartoko]

@dbismut all occurances happened on Android phones, FYI I use Samsung S22 ultra.