cloudflare / cloudflare/cloudflare-os
Mobile browsers auto-zoom when focusing on input fields
- Dominant language
- TypeScript
- Stars
- 9.9k
- Forks
- 1.2k
- Avg merge
- 1d 20h
- Merged PRs (30d)
- 107
Description
## Problem
On mobile browsers (especially iOS Safari), focusing on an input field triggers an automatic page zoom. This is a well-known browser behavior that occurs when an input element has a `font-size` smaller than **16px**.
This is disruptive to the user experience — the page zooms in unexpectedly and doesn't zoom back out after the input loses focus.
## Expected behavior
Tapping an input field should not cause the page to zoom on mobile devices.
## Suggested fix
Ensure all input elements (`input`, `select`, `textarea`) have a `font-size` of at least `16px`:
```css
input,
select,
textarea {
font-size: 16px;
}
```
This prevents the auto-zoom while keeping the page accessible (users can still manually zoom if needed).
An alternative would be to set `maximum-scale=1` in the viewport meta tag, but this **disables user zooming entirely**, which is harmful for accessibility and is not recommended.
## Environment
- Affected: mobile browsers (notably iOS Safari)
- Likely occurs on any input with a font-size below 16px
Contributor guide
Research direction
Search the frontend styles for input, select, and textarea rules and inspect their current font sizes. Verify the affected fields on a mobile browser, then confirm that focusing them no longer triggers automatic zoom while user zooming remains available.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css
- Domain
- accessibility, frontend
- Issue type
- Bug
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 72/100