Mobile (iPhone): occasional zoom / magnifying glass on rapid touch-control button taps (#60 refinement) #64

New issue

Closed

opened 2026-06-21 20:05:02 +02:00 by bosun · 0 comments

bosun commented

2026-06-21 20:05:02 +02:00

Owner

Symptom (operator playtest 2026-06-21 evening iPhone post-PR #61 deploy)

Operator: "the only remaining issue with the touch control was an occasional zoom or the appearance of a magnifying glass while dashing some of the buttons quickly".

PR #61 (#60) closed the touch-and-hold text-selection loupe on the game canvas. Operator confirms that fix works. But during rapid button-taps (left/right/rotate/soft-drop), iOS occasionally triggers either:

Double-tap-to-zoom behavior
The text-cursor magnifying glass

Likely root cause

PR #61 scoped touch-action: manipulation + user-select: none to #app with inheritance. Touch-control buttons inherit via DOM ancestry. But:

Rapid double-tap heuristic: iOS still detects double-tap-to-zoom even with touch-action: manipulation. The 300ms tap delay may interact with rapid sequential taps in ways that escape the manipulation hint, especially on certain Safari builds.
<button> defaults: HTML buttons have default tap-feedback that may not respect parent-scoped suppression hints. Explicit touch-action: manipulation directly on buttons may resolve.
Magnifier on rapidly-tapped buttons: less common, but if button content includes text that iOS interprets as text-input target during rapid taps the magnifier can leak through.

Fix direction

Explicit touch-action: manipulation on button selectors rather than relying on #app inheritance
touch-action: none on canvas explicitly (canvas should never accept browser gestures)
pointer-events: auto + -webkit-touch-callout: none directly on each touch button
Last resort: viewport meta user-scalable=no (accessibility-hostile, avoid if scoping works)

Acceptance criteria

Rapid sequential button-taps do NOT trigger page zoom
Rapid sequential button-taps do NOT trigger iOS text-cursor magnifying glass
Single taps still register as game inputs (no lost taps from suppression)
Verified on operator iPhone during follow-up playtest
Existing PR #61 fix unchanged (canvas touch-and-hold suppression still working)

Lane

Shipwright (CSS scoping refinement same family as #60). Fold into #57 portrait-layout PR if buttons being relaid-out, OR standalone S-size CSS PR if #57 scope grows large.

Effort

Size/S — explicit button-scope CSS + iPhone device-verify cycle.

Anchor

Operator iPhone playtest 2026-06-21 ~19:53 post-round-9 screenshot. PR #61 closed the canvas touch-and-hold loupe; this is a refinement on touch-control buttons specifically during rapid input.

## Symptom (operator playtest 2026-06-21 evening iPhone post-PR #61 deploy) Operator: *"the only remaining issue with the touch control was an occasional zoom or the appearance of a magnifying glass while dashing some of the buttons quickly"*. PR #61 (#60) closed the touch-and-hold text-selection loupe on the game canvas. Operator confirms that fix works. But during rapid button-taps (left/right/rotate/soft-drop), iOS occasionally triggers either: - Double-tap-to-zoom behavior - The text-cursor magnifying glass ## Likely root cause PR #61 scoped `touch-action: manipulation` + `user-select: none` to `#app` with inheritance. Touch-control buttons inherit via DOM ancestry. But: 1. **Rapid double-tap heuristic**: iOS still detects double-tap-to-zoom even with `touch-action: manipulation`. The 300ms tap delay may interact with rapid sequential taps in ways that escape the manipulation hint, especially on certain Safari builds. 2. **`<button>` defaults**: HTML buttons have default tap-feedback that may not respect parent-scoped suppression hints. Explicit `touch-action: manipulation` directly on buttons may resolve. 3. **Magnifier on rapidly-tapped buttons**: less common, but if button content includes text that iOS interprets as text-input target during rapid taps the magnifier can leak through. ## Fix direction 1. **Explicit `touch-action: manipulation` on button selectors** rather than relying on `#app` inheritance 2. **`touch-action: none` on canvas explicitly** (canvas should never accept browser gestures) 3. **`pointer-events: auto` + `-webkit-touch-callout: none` directly on each touch button** 4. Last resort: viewport meta `user-scalable=no` (accessibility-hostile, avoid if scoping works) ## Acceptance criteria 1. Rapid sequential button-taps do NOT trigger page zoom 2. Rapid sequential button-taps do NOT trigger iOS text-cursor magnifying glass 3. Single taps still register as game inputs (no lost taps from suppression) 4. Verified on operator iPhone during follow-up playtest 5. Existing PR #61 fix unchanged (canvas touch-and-hold suppression still working) ## Lane Shipwright (CSS scoping refinement same family as #60). Fold into #57 portrait-layout PR if buttons being relaid-out, OR standalone S-size CSS PR if #57 scope grows large. ## Effort Size/S — explicit button-scope CSS + iPhone device-verify cycle. ## Anchor Operator iPhone playtest 2026-06-21 ~19:53 post-round-9 screenshot. PR #61 closed the canvas touch-and-hold loupe; this is a refinement on touch-control buttons specifically during rapid input.