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:
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user