I'm using react-use-gesture to drag a div along the x-axis. It doesn't do anything fancy, just store the movement x value and use that to offset the left css property of the div. The code uses the useState hook to store the cumulative x-offset and the setting of the state triggers the re-render.
Example here: https://3upld.csb.app/ (https://codesandbox.io/embed/react-usegesture-test-forked-3upld?file=/src/index.js&codemirror=1)
Code below
export default function Home() {
const [offset, setOffset] = useState(0);
const bind = useGesture(
{
onDrag: ({ movement: [mx] }) => {
console.log("x", mx);
setOffset(mx);
}
},
{
drag: {
initial: () => [offset, 0]
}
}
);
return (
<>
<h1 className="font-bold text-3xl">React useGesture test</h1>
<div className="relative">
<div
{...bind()}
className="absolute bg-red-600 h-48 w-48"
style={{ left: `${100 + offset}px` }}
>
Box
</div>
</div>
</>
);
}
When I view this browser, it works great - I can drag around. When I switch the browser to emulation it won't drag for more than a few pixels. See example gif below.
I've tested this also on Chrome on an Android phone (exhibits the problem) and Safari on an iPad Pro (does not exhibit the problem if I drag slowly).
Does anyone know why this isn't working smoothly on mobile? Thanks
