Mobile (iPhone): touch-and-hold triggers iOS text-selection over the game canvas #60

New issue

Closed

opened 2026-06-21 17:34:28 +02:00 by bosun · 0 comments

bosun commented

2026-06-21 17:34:28 +02:00

Owner

Symptom (operator playtest, 2026-06-21, iPhone)

Operator: "During the play on the iPhone the browser sometimes seems to select the game as text (there is a selection displayed at times)".

While playing on iPhone Safari, touch interactions on the canvas/game area intermittently trigger the iOS text-selection gesture — a selection rectangle or loupe appears over the game, interfering with gameplay.

Root cause

iOS Safari treats long-press on most page elements as a text-selection gesture, even when the content isnt text (canvas, DOM elements without user-select: none). The browser tries to be helpful and offers selection/copy UI; for a game canvas this is purely disruptive.

Fix

Apply CSS to the canvas element and the game container:

canvas, .game-container, body {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;  /* disables long-press menu */
  touch-action: manipulation;   /* disables double-tap-to-zoom + reduces gesture conflicts */
}

May also need -webkit-tap-highlight-color: transparent; to disable the tap-flash that iOS shows.

Know trade-off: user-select: none on the WHOLE page would block selection on legitimate text (eg leaderboard names, debug overlay). Scope to canvas + touch-control elements; leave text content selectable.

Acceptance criteria

Touch-and-hold on game canvas does NOT trigger iOS text-selection rectangle or loupe
Tap-to-zoom is disabled on the play area (game-relevant only)
Legitimate text (HIGH SCORES leaderboard names + initials post-entry + debug overlay) remains selectable for accessibility
Touch interactions (tap, swipe) still register normally for gameplay controls
No regression on desktop (mouse + keyboard) interactions

Lane

Shipwright (CSS + render container styling). Probably small standalone PR or bundle with #57 layout work.

Effort

Size/S — a few CSS rules + careful scoping. Quick fix relative to the rest of the mobile work.

Anchor

Operator iPhone playtest 2026-06-21 17:27. Filed alongside #57 portrait-layout + #58 initials-entry as part of the cellblock mobile-session batch.

## Symptom (operator playtest, 2026-06-21, iPhone) Operator: *"During the play on the iPhone the browser sometimes seems to select the game as text (there is a selection displayed at times)"*. While playing on iPhone Safari, touch interactions on the canvas/game area intermittently trigger the iOS text-selection gesture — a selection rectangle or loupe appears over the game, interfering with gameplay. ## Root cause iOS Safari treats long-press on most page elements as a text-selection gesture, even when the content isnt text (canvas, DOM elements without `user-select: none`). The browser tries to be helpful and offers selection/copy UI; for a game canvas this is purely disruptive. ## Fix Apply CSS to the canvas element and the game container: ```css canvas, .game-container, body { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; /* disables long-press menu */ touch-action: manipulation; /* disables double-tap-to-zoom + reduces gesture conflicts */ } ``` May also need `-webkit-tap-highlight-color: transparent;` to disable the tap-flash that iOS shows. Know trade-off: `user-select: none` on the WHOLE page would block selection on legitimate text (eg leaderboard names, debug overlay). Scope to canvas + touch-control elements; leave text content selectable. ## Acceptance criteria 1. Touch-and-hold on game canvas does NOT trigger iOS text-selection rectangle or loupe 2. Tap-to-zoom is disabled on the play area (game-relevant only) 3. Legitimate text (HIGH SCORES leaderboard names + initials post-entry + debug overlay) remains selectable for accessibility 4. Touch interactions (tap, swipe) still register normally for gameplay controls 5. No regression on desktop (mouse + keyboard) interactions ## Lane Shipwright (CSS + render container styling). Probably small standalone PR or bundle with #57 layout work. ## Effort Size/S — a few CSS rules + careful scoping. Quick fix relative to the rest of the mobile work. ## Anchor Operator iPhone playtest 2026-06-21 17:27. Filed alongside #57 portrait-layout + #58 initials-entry as part of the cellblock mobile-session batch.