search

lichess-org / chessground

Mobile/Web chess UI for lichess.org
https://lichess.org
GNU General Public License v3.0
1.06k stars 261 forks source link

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

Open supertorpe opened 8 months ago

supertorpe commented 8 months ago

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;
}
supertorpe commented 8 months ago

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