-
Notifications
You must be signed in to change notification settings - Fork 301
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
useDrag is stuck on iOS when navigating between pages #349
Comments
It seems this package is not handling the https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/lostpointercapture_event |
Can you try upgrading to |
I updated to Both repo and demo are updated |
Hi, indeed I can reproduce the issue on the docs website. Thanks for bringing that up. I'm not exactly sure how to fix this yet: the issue is not so much about I believe there might be a workaround with using touch events and preventing default ( If you have any hints at how I could solve this that would be great! |
I had an issue on Android where pointercancel was being fired when I didn't expect it to, and seemed to resolve it by just using { pointer: { touch: true }. |
@jzombie very likely you didn't properly set |
I did, actually. Noticed it on my Android device, then used BrowserStack to do some testing with as well, and noticed it happening on some devices, but not others, using the same Chrome version. It might be related to some other specifics of my implementation, though, but all I know is using the touch events resolved it, and it is consistent on iOS as well. Just very happy the touch events worked out. |
I came across this reddit thread: And the Redditor u/FabianDR makes an interesting observation that Edit:
If you backout of a forward navigation halfway through
|
Describe the bug
When using the swipe gestures to go backwards/forwards in your browser history it is possible to break the
useDrag
functionality. This occurs when you initiate the gesture on an element which is bound touseDrag
.It happens because iOS doesn't refresh the page when going back, but rather uses a cached version.
The workaround I use in our codebase now is to listen on the
visibilitychange
event and call thecancel
function provided by the gesture state.Sandbox or Video
(I used the demo from the website to reproduce the issue, but it is unrelated to the usage of
@react-spring/web
)Information:
Checklist:
touch-action: none
to the draggable element.The text was updated successfully, but these errors were encountered: