Skip to content
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.

Sign up for GitHub

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

Jump to bottom

drag&drop stops working on mobile when "touch-action: manipulation" #296

Open
supertorpe opened this issue Mar 2, 2024 · 1 comment
Open

drag&drop stops working on mobile when "touch-action: manipulation" #296

supertorpe opened this issue Mar 2, 2024 · 1 comment

Comments

@supertorpe
Copy link

supertorpe commented Mar 2, 2024 •
edited
Loading

If I embed a chessground element inside a parent element with the style "touch-action: manipulation", drag&drop stops working on mobile.

<body style="touch-action: manipulation">
  <div class="blue california">
    <div id="chessboard"></div>
  </div>
  <script src="src/main.ts"></script>
</body>

main.ts

...
const boardConfig  = { ... }
board = Chessground(document.getElementById("chessboard") as HTMLElement, boardConfig);

I've tracked the bug down to this commit: 4b5b4ae that fixes a bug about duplicate select event.

Commenting this line...

else if (e.touches) return; // Handle only corresponding mouse event https://github.com/lichess-org/chessground/pull/268

...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:

body, ion-content::part(scroll) {
    touch-action: auto;
}
@supertorpe
Copy link
Author

Ionic sets touch-action: manipulation to avoid the delay of click events due to the need of checking double-tap to zoom gesture.

manipulation
Enable panning and pinch zoom gestures, but disable additional non-standard gestures such as double-tap to zoom. Disabling double-tap to zoom removes the need for browsers to delay the generation of click events when the user taps the screen. This is an alias for "pan-x pan-y pinch-zoom" (which, for compatibility, is itself still valid).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@supertorpe