Mobile bug involving highlight/lastMove options.

[adeel]

The following configuration settings appear to exhibit a bug in Chessground:

Chessground(container, {
  "fen": "8/p5b1/2p1q2k/5N1P/2P1B3/3P2p1/P1Q1pr1P/4R2K b - - 0 1",
  "turnColor": "black",
  "orientation": "black",
  "movable": {
    "free": false,
    "color": "black",
    "dests": {"h6": ["g5", "h5", "h7"], "e6": ["f5"], "f2": ["f5"]},
    "showDests": true,
    "events": {
      "after": function(orig, dest, metadata) {
        alert("move made");
      }
    }
  },
  "premovable": {"enabled": false},
  "lastMove": ["h7", "h6"],
  "highlight": {"lastMove": true},
});

See this url for an example. This code works as expected on Desktop browsers (tested on Firefox and Safari on macOS). However, on mobile browsers (tested on Safari and Firefox on iOS), moving the King on h6 to any of the 3 allowed squares does not work. In particular, the expected alert "move made" does not appear. Making any other allowed move (either capturing the Knight on f5 with the Queen on e6 or the Rook on f2) works fine and produces the expected alert box. The culprits appear to be the "lastMove" and "highlight" settings, which cause the squares h6 and h7 to become highlighted. In short, it seems that any highlighted piece cannot be moved, on mobile browsers.

[adeel]

As a side question, is there any publicly exposed API method (or configuration option) that would allow highlighting squares manually (without the semantic association imposed by the lastMove option)?

[niklasf]

I ran into this issue as well (niklasf/syzygy-tables.info@129b4a5682ee47fdf302fdfffe39a052bc17462e). It looks like pointer-events is not working properly with mobile devices.

[adeel]

Thanks!