-
-
Notifications
You must be signed in to change notification settings - Fork 261
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
drag&drop stops working on mobile when "touch-action: manipulation" #296
Comments
Ionic sets touch-action: manipulation to avoid the delay of click events due to the need of checking double-tap to zoom gesture. manipulation |
If I embed a chessground element inside a parent element with the style "touch-action: manipulation", drag&drop stops working on mobile.
main.ts
I've tracked the bug down to this commit: 4b5b4ae that fixes a bug about duplicate select event.
Commenting this line...
...avoids the issue (at the expense of duplicate select events).
This behavior was found when embedding chessground into an Ionic webapp. Ionic sets touch-action: manipulation in the body element (and also has some class like 'inner-scroll' with touch-action: pan-x pan-y pinch-zoom; that also breaks drag&drop).
I don't know what could be an ideal solution. A workaround could be set a new configuration param to enable/disable the line "else if (e.touches) return;" but it looks dirty.
Here you have a demo to check the behavior: https://7vy38h.csb.app
Plain chessground => works ok
Chessground + Ionic => drag&drop doesn't work on mobile
Chessground + touch-action: manipulation => drag&drop doesn't work on mobile
Click "Open Sandbox" to see the code.
I have this workaround to make it work with Ionic:
The text was updated successfully, but these errors were encountered: