cloudflare / cloudflare/cloudflare-os

Mobile browsers auto-zoom when focusing on input fields

Open Beginner friendly
#222 0 comments 0 reactions 0 assignees View on GitHub
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.