lichess-org
drag&drop stops working on mobile when "touch-action: manipulation"
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: https://github.com/lichess-org/chessground/pull/268/commits/4b5b4aebf56b7974e52dff211a3776c04d697f57 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;
}
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).