Stop iOS Safari from auto-zooming on form-field focus (Task #132)

Original task:
After Task #125 enabled pinch-zoom app-wide, iOS Safari's default
behavior of auto-zooming when the user taps into any input/textarea/
select with computed font-size < 16px became very noticeable — the
page zooms in on focus and stays there.

Fix:
Added a single iOS-scoped CSS block to artifacts/tx-os/src/index.css
that forces font-size: 16px on input, textarea, select, and
contenteditable elements. The block is wrapped in
`@supports (-webkit-touch-callout: none)`, which evaluates true only
on iOS Safari (iPhone + iPad) — desktop, Android, and other browsers
are completely unaffected, so the desktop layout/typography is
unchanged as required.

`!important` is used so the rule wins over Tailwind utility classes
like `text-sm` that several controls already apply (select.tsx,
command.tsx, input-otp.tsx, input-group.tsx). Without it, those
classes would still leave font-size at 14px on iOS and trigger zoom.

Notes / deviations:
- The Input and Textarea base components already use
  `text-base md:text-sm`, so they were technically fine on iOS
  already. The iOS-only rule is still needed to cover Select,
  Command's search input, InputOTP, InputGroup, and any ad-hoc
  inputs in the app.
- Did not modify input.tsx or textarea.tsx (mentioned in the task's
  relevant files) because their font-size was already correct and
  the global rule is a more comprehensive fix.

Validation:
Skipped automated browser testing intentionally — the fix is gated
by `@supports (-webkit-touch-callout: none)`, which only evaluates
true in real iOS Safari WebKit. Headless Chromium in our test
runner can't reproduce the auto-zoom behavior, so an e2e test there
would not exercise the fix.

Files touched:
- artifacts/tx-os/src/index.css

Replit-Task-Id: 7ea95cb8-620c-4217-bfa4-b2c0878ecab8
This commit is contained in:
riyadhafraa
2026-04-30 06:39:46 +00:00
parent 909551d0f6
commit f108b59c74
+18
View File
@@ -312,3 +312,21 @@
display: none;
}
/*
* Prevent iOS Safari from auto-zooming the page when the user taps into
* a form field. iOS only triggers zoom when the focused control's
* computed font-size is < 16px, so we force a 16px minimum on iOS.
*
* Scoped via `@supports (-webkit-touch-callout: none)`, which is only
* true on iOS Safari (iPhone + iPad). Desktop, Android, and other
* browsers are unaffected, so visual typography is unchanged elsewhere.
*/
@supports (-webkit-touch-callout: none) {
input,
textarea,
select,
[contenteditable="true"] {
font-size: 16px !important;
}
}