79706e817a
Belt-and-suspenders for the iOS Safari auto-zoom-on-input quirk: Mobile Safari zooms the viewport when an `<input>`/`<textarea>`/`<select>` is focused & its computed font-size < 16px, and never zooms back out on blur. Two layers ; PRIMARY — SCSS prevention: new `input, textarea, select, [contenteditable] { font-size: unquote("max(16px, 1em)") }` in core.scss (Sass can't reconcile px/em units in compile-time max() so unquote() passes the CSS max() through verbatim — modern browsers handle natively). 1em inherits parent, max() floors at 16. ALSO floored `.form-control-lg` in _base.scss — was `font-size: 1.125rem`, which at rem=14 (small portrait, clamp(14px, 2.4vmin, 22px) hits its floor) computes to 15.75px → **0.25px** under iOS's 16px threshold → the "ever so slightly" zoom on New Game + New Post applets the user reported (both use `.form-control.form-control-lg`, specificity 0,2,0 beats my element-level 0,0,1 rule). Floor: `unquote("max(16px, 1.125rem)")` ; SECONDARY — JS fallback in base.html: rewritten from `setAttribute('content', ...)` toggle to full meta-element remove+re-add, which modern iOS handles more reliably than attribute mutations on the existing meta. Triggers on document-level `focusout` (bubbles natively, no capture-phase needed) for `input/textarea/select`; injects fresh viewport meta w. `maximum-scale=1.0, user-scalable=no` for 300ms (iOS reads as zoom violation → snaps to 1:1), then swaps back to the cached base content so pinch-zoom remains available elsewhere ; user observed horizontal scrollbar appearing when the page zoomed — that's the symptom the user actually cared about (broken layout, not aesthetic zoom). w. SCSS floor in place the zoom shouldn't trigger to begin with; the JS is purely for inputs that slip through (future custom controls, shadow DOM, etc.) ; iOS-specific behavior — Selenium+Firefox doesn't replicate the auto-zoom so no FT layer added. Verified by user manual iPhone test (post-fix retest pending after force-refresh)
Code architected by Disco DeDisco <discodedisco@outlook.com>
Git commit message Co-Authored-By:
Claude Sonnet 4.6 <noreply@anthropic.com>
33 lines
952 B
SCSS
33 lines
952 B
SCSS
@import 'rootvars';
|
|
@import 'applets';
|
|
@import 'base';
|
|
@import 'button-pad';
|
|
@import 'dashboard';
|
|
@import 'gameboard';
|
|
@import 'palette-picker';
|
|
@import 'room';
|
|
@import 'card-deck';
|
|
@import 'sky';
|
|
@import 'tray';
|
|
@import 'billboard';
|
|
@import 'note';
|
|
@import 'tooltips';
|
|
@import 'game-kit';
|
|
@import 'bud';
|
|
@import 'wallet-tokens';
|
|
|
|
|
|
input,
|
|
textarea,
|
|
select,
|
|
[contenteditable] {
|
|
user-select: text;
|
|
touch-action: auto;
|
|
// iOS Safari auto-zooms when focusing a form field whose computed font-size
|
|
// is < 16px. At rem=14 (small portrait viewports w. clamp(14,2.4vmin,22))
|
|
// a 1rem input is 14px → triggers zoom. `max(16px, 1em)` enforces the 16px
|
|
// floor while still inheriting larger sizes from parent contexts when set.
|
|
// unquote() keeps Sass from trying to evaluate the px/em compare at compile
|
|
// time (it can't reconcile units); CSS max() handles it natively at runtime.
|
|
font-size: unquote("max(16px, 1em)");
|
|
} |