BUG iOS Safari: Rapid tapping admin buttons (e.g. Volume Up/Down) triggers browser zoom

[maxlin1]

Bug Description

When tapping the admin control buttons (🔉 Volume Down / 🔊 Volume Up / ⏩ +10s) multiple times in quick succession — which is the natural usage when trying to adjust volume during a game — iOS Safari interprets the rapid taps as a double-tap zoom gesture and zooms into the page.

This is a native iOS Safari behavior: two taps within ~300ms on the same element triggers viewport zoom. Once zoomed in, the admin controls are displaced and the layout breaks until the user manually pinches out to reset.

Device

• Device: iPhone 17 Pro Max (reproducible on all modern iPhones with iOS Safari)
• Browser: Safari (iOS, default)
• Screen: Admin panel → bottom control bar during game

Screenshot

Steps to Reproduce

1. Open Beatify Admin on an iPhone in Safari
2. Start a game so the bottom control bar is visible
3. Tap 🔊 (Volume Up) 2–3 times quickly to raise the volume
4. → Safari zooms in on the button area

Expected Behavior

Rapid tapping buttons performs the button action (volume up) multiple times without triggering any zoom.

Root Cause (Code Analysis)

The fix for this is well-known: setting touch-action: manipulation on interactive elements tells iOS Safari to skip the double-tap zoom delay and treat rapid taps as individual clicks.

The property is already used correctly on .bet-toggle (styles.css ~line 6042):

/* already correct on bet-toggle */
-webkit-tap-highlight-color: transparent;
-webkit-user-select: none;
user-select: none;
touch-action: manipulation;  ✅

But it is missing from the base .btn class (styles.css line 596):

/* CURRENT — missing touch-action */
.btn {
    min-width: 44px;
    min-height: 44px;
    padding: var(--space-sm) var(--space-lg);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-medium);
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background-color var(--transition-fast), opacity var(--transition-fast);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    /* ❌ touch-action: manipulation; is NOT here */
}

And also missing from .btn-compact (styles.css line 8769) — which is the exact class used on the volume and seek buttons:

/* CURRENT */
.btn-compact {
    padding: 8px 12px;
    font-size: 0.85rem;
    /* ❌ touch-action: manipulation; is NOT here */
}

The affected buttons in admin.html (lines 517–520):

<button id="admin-seek-forward" class="btn btn-secondary btn-compact">⏩ +10s</button>
<button id="admin-vol-down"     class="btn btn-secondary btn-compact">🔉</button>
<button id="admin-vol-up"       class="btn btn-secondary btn-compact">🔊</button>
<button id="admin-end-game-playing" class="btn btn-danger btn-compact">End Game</button>

Additionally, the viewport meta tag in admin.html (and player.html, dashboard.html) is:

<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">

It is missing maximum-scale=1 which would also prevent zoom. However, touch-action: manipulation on .btn is the preferred fix as it preserves accessibility zoom for the rest of the page content.

Proposed Fix

1. Add touch-action: manipulation to the .btn base class in styles.css:

.btn {
    min-width: 44px;
    min-height: 44px;
    padding: var(--space-sm) var(--space-lg);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-medium);
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background-color var(--transition-fast), opacity var(--transition-fast);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    /* ✅ ADD: prevents iOS double-tap zoom on all buttons */
    touch-action: manipulation;
}

This single-line fix covers all buttons across admin, player, dashboard and launcher — because every button uses the .btn base class.

2. (Optional but recommended) Also update styles.min.css or regenerate the minified version after the fix.

3. (Optional) Viewport hardening for admin and player pages only:

<!-- For admin.html and player.html where zoom serves no purpose -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">

⚠️ Note: user-scalable=no is an accessibility concern (WCAG 1.4.4) and should only be applied to the admin/player pages where pinch-zoom has no utility, not to all pages.

Impact

• Affects all iPhone/iPad users on Safari
• Particularly bad on admin panel where rapid button taps (volume) are expected
• Also affects the Player page (answer slider rapid taps) and any modal confirm buttons

Affected Files

File	Change
www/css/styles.css	Add touch-action: manipulation to .btn (line ~596)
www/css/styles.min.css	Regenerate / update minified version
www/admin.html	Optional: add maximum-scale=1, user-scalable=no to viewport meta
www/player.html	Optional: same viewport update