# WebKit and iPhone Form Checklist

A form can look right in desktop Chrome and be broken on every iPhone, because every browser on an
iPhone runs Apple's WebKit and iOS restyles some form controls after your CSS has run. This file is a
pass over your own code: what to grep for, what to measure, how to test without a Mac, what passes and
what fails, the CSS that fixes each problem, and a prompt you can hand an AI coding agent.

Version 1.0, 2026-09-23. Source article:
https://jwatte.com/blog/iphone-date-fields-stick-out-webkit-fix/

---

## 0. How to use this file

Three facts come before any check.

1. **Every browser on an iPhone is WebKit.** Safari, Chrome, Firefox, Edge and the browsers inside
   social apps all use Apple's engine (App Review Guideline 2.5.6). Apple allows other engines for
   users in the EU (iOS 17.4 and later) and Japan (iOS 26.2 and later), but as of September 2026 no
   major browser ships one. "It works in Chrome" on a desktop tells you nothing about Chrome on an
   iPhone.
2. **Playwright's WebKit is not iOS.** Playwright ships WebKit for Linux, Windows and macOS. The
   iOS code that causes the problems below never runs in any of them. On Windows, Playwright's
   WebKit 26.4 build does not even have a date control: an `<input type="date">` reports its `type`
   as `"text"`.
3. **A desktop browser at phone width is not a phone.** It is also not always at phone width. Before
   you trust anything you see, run `document.documentElement.clientWidth` in the console and check
   it reads 320 to 430.

Work through it in this order:

- [ ] Section 1: grep your templates and stylesheets (about ten minutes)
- [ ] Section 2: know the numbers that decide pass and fail
- [ ] Section 3: run the Playwright script at four phone widths, before you change anything
- [ ] Section 4: apply the fixes for what failed
- [ ] Section 3 again: the same script, after
- [ ] Section 5: one pass on a real iPhone, which is the only real confirmation
- [ ] Section 6: the prompt, if you want an AI coding agent to do sections 1 to 4 for you

---

## 1. Grep your code

The commands are for bash or zsh with ripgrep (`rg`), which skips whatever your `.gitignore` skips.
Run them from the project root. Each one ends in `.` on purpose: with no path, `rg` searches
standard input instead of the folder when standard input is a pipe, which is how many AI agents'
shells run commands, and it sits there waiting. A hit is a lead, not a verdict: the script in section 3 measures what actually
renders.

```bash
# 1a. Date and time inputs, in HTML, templates and JSX
rg -n "type=[\"']?(date|time|datetime-local|month|week)\b" .

# 1b. Does any appearance: none reach them? Compare the selectors against the classes 1a found.
#     No file filter: inline <style> blocks and component files count too.
rg -n "appearance:\s*none" .
rg -n "input\[type=[\"']?(date|time|datetime-local|month|week)" .

# 1c. Rules that do nothing on an iPhone (iOS draws the value as one box, not segments)
rg -n "::-webkit-datetime-edit" .

# 1d. Small type on form controls (an input with NO font-size at all is 11px on iOS)
rg -n --glob '*.{css,scss,sass,less,html,htm,vue,svelte,astro}' "font-size:\s*(1[0-5](\.\d+)?px|0?\.\d+r?em|small|x-small|smaller)" .

# 1e. Zoom blocked in the viewport meta
rg -n "maximum-scale|user-scalable" .

# 1f. 100vh, and whether a small or dynamic viewport fallback exists anywhere
rg -n "100vh" .
rg -n "\b\d+(\.\d+)?(svh|dvh|lvh)\b" .

# 1g. Things fixed to the bottom of the screen
rg -n -A4 "position:\s*fixed" . | rg "bottom:"

# 1h. viewport-fit=cover, and whether safe-area insets are used
rg -n "viewport-fit=cover" .
rg -n "safe-area-inset" .

# 1i. Grid tracks that cannot shrink below their content
rg -n "grid-template-columns:[^;]*\b1fr\b" . | rg -v "minmax\((0|min\()"

# 1j. Number inputs, which often hold codes rather than quantities
rg -n "type=[\"']?number\b" .

# 1k. A viewport opt-out Safari ignores
rg -n "interactive-widget" .
```

| Hit | What it means | Fix |
|---|---|---|
| 1a finds inputs and 1b finds no `appearance: none` that reaches them | iOS applies its theme step: a min-width floor, `box-sizing: content-box`, a min-height, a centered value. With `width: 100%` the field ends past its container by its padding plus border | 4.1 |
| 1c finds rules | Harmless, but they do nothing on iOS. Don't count them as iPhone styling | 4.1 |
| 1d finds a size under 16px on a form control, or controls have no font-size | iPhone zooms the page when that field gets focus, by 16 divided by the size | 4.3 |
| 1e finds either | Pinch zoom blocked in in-app browsers and Android Chrome; Lighthouse fails it | 4.3 |
| 1f finds `100vh` and no `svh` or `dvh` | Full-height layouts run under Safari's toolbar | 4.4 |
| 1g finds `bottom:` on a fixed element near a form | The bar ends up behind the keyboard or mid-screen; it may cover the submit button | 4.5, 4.7 |
| 1h finds `viewport-fit=cover` and no `safe-area-inset` | The home indicator sits on your bottom bar | 4.6 |
| 1i finds bare `1fr` columns in forms | One wide field (an iOS date input is one) pushes the column past the screen | 4.2 |
| 1j finds number inputs for card numbers, ZIP codes or one-time codes | Wrong keyboard, rounding and screen reader problems | 4.8 |
| 1k finds it | `interactive-widget` works in Chrome for Android and Firefox for Android, not in Safari | 4.5 |

---

## 2. The numbers that decide pass and fail

These come from WebKit's source (main branch, commit ae2aca5d8313f4aa421b26869a831de014e2bb0c, read
September 23, 2026). Links are in section 7.

| What iOS does | The number |
|---|---|
| Appearance of date, time, datetime-local, month and week inputs | `MenulistButton` (a button, like a select); Mac and Linux get a text field |
| Min-width it sets, unless your width is a fixed positive length | the widest string the control could show, in the DEVICE locale, in the field's own font: medium date for `date` ("Sep 30, 2026" in US English), medium date plus short time for `datetime-local`, full month name plus year for `month`, short time for `time` |
| Box sizing it forces at the same time | `content-box`, so `width: 100%` plus padding plus border is wider than the container |
| Side padding | half an em a side where you set none; older iOS code forced it over yours, the newer form-control code keeps yours |
| Min-height it sets when height is automatic | max(15px, 20/11 of the font size): 29px at 16px, applied to the content box |
| Value alignment in the built-in stylesheet | `text-align: center` on `::-webkit-date-and-time-value` |
| Empty date field | no placeholder, no format hint, no calendar icon: a blank box |
| What turns the theme step off | `appearance: none` (the picker still opens on tap) |
| Focus zoom on iPhone (not iPad) | scale = 16 / the focused field's font size: 14px zooms about 1.14 times, 11px about 1.45 times |
| Default font of an unstyled input on iOS | `11px system-ui`; form controls don't inherit the page font |

Pass and fail, per page, at 320, 375, 390 and 414 pixels wide:

| Measurement | Pass | Fail |
|---|---|---|
| `scrollWidth - clientWidth` of the document | 0.5px or less | more than 0.5px |
| Each field's right edge against its parent's content box, and against the screen | 0.5px or less | more than 0.5px |
| Date and time field height against the median text field height | within 1px | more than 1px |
| Computed `appearance` of date and time fields | `none` | anything else |
| Computed `font-size` of every input, select and textarea | 16px or more | under 16px |
| Viewport meta | no `maximum-scale` under 5, no `user-scalable=no` | either present |
| On a device: date value alignment | left (or `start`) | centered |
| On a device, keyboard open: anything fixed over the submit button at 320 to 375px | nothing | anything |

A quick look in any browser's DevTools console at phone width (it prints a table; `pastBox` and
`pastScreen` should be 0 or negative):

```js
(() => {
  const de = document.documentElement, vw = de.clientWidth;
  console.log('layout width ' + vw + 'px, page wider than the screen by ' + (de.scrollWidth - vw) + 'px');
  const rows = [];
  for (const el of document.querySelectorAll('input, select, textarea')) {
    const type = (el.getAttribute('type') || el.tagName).toLowerCase();
    if (/^(hidden|checkbox|radio|submit|button|reset|image)$/.test(type)) continue;
    const r = el.getBoundingClientRect();
    if (!r.width) continue;
    const p = el.parentElement, pr = p.getBoundingClientRect(), ps = getComputedStyle(p), cs = getComputedStyle(el);
    const edge = pr.right - parseFloat(ps.paddingRight) - parseFloat(ps.borderRightWidth);
    rows.push({ field: el.id || el.name || type, type, pastBox: +(r.right - edge).toFixed(2), pastScreen: +(r.right - vw).toFixed(2), height: +r.height.toFixed(2),
      font: cs.fontSize, appearance: cs.appearance || cs.webkitAppearance, boxSizing: cs.boxSizing });
  }
  console.table(rows);
})();
```

In a desktop browser this shows desktop behavior. It catches grid and flex overflow and small fonts;
it cannot show the iOS date problem. For that, use section 3.

---

## 3. Test it without a Mac: a Playwright script

Save as `webkit-form-check.mjs`. It loads each URL at four phone widths in Playwright's WebKit (with
an iPhone profile) and Chromium (with a Pixel profile), replays the iOS theme step on date inputs in
WebKit, measures, prints PASS or FAIL per check, and exits 1 on any failure so it can gate CI.

```bash
npm i -D playwright
npx playwright install webkit chromium
node webkit-form-check.mjs https://example.com/booking.html http://localhost:8080/contact.html
IOS_LOCALE=de-DE node webkit-form-check.mjs https://example.com/booking.html   # a German iPhone
NO_REPLAY=1 node webkit-form-check.mjs https://example.com/booking.html         # plain WebKit
```

`file:///` URLs work too, for a static build folder.

```js
// webkit-form-check.mjs: measure form fields at phone widths in WebKit and Chromium.
// Setup, once:  npm i -D playwright  &&  npx playwright install webkit chromium
// Run:          node webkit-form-check.mjs https://example.com/booking.html [more URLs]
// Env:          IOS_LOCALE=en-US (the phone's language; iOS measures dates in the DEVICE locale)
//               NO_REPLAY=1      (measure WebKit without the iOS theme replay)
// Exit code 1 when any check fails, so it can gate a CI job.
import { webkit, chromium, devices } from 'playwright';

const urls = process.argv.slice(2);
if (!urls.length) { console.error('usage: node webkit-form-check.mjs <url> [url...]'); process.exit(2); }
const WIDTHS = [320, 375, 390, 414];
const LOCALE = process.env.IOS_LOCALE || 'en-US';
const REPLAY = !process.env.NO_REPLAY;
const TOL = 0.5; // px

// No Playwright WebKit build runs iOS code (the builds are Linux, Windows and macOS), so this replays
// the iOS theme step for date-type inputs, from WebKit's RenderThemeIOS / RenderThemeCocoa source:
// unless the input's appearance is none, iOS sets min-width to the widest date it can show (device
// locale, the input's own font), box-sizing to content-box (skipped when the width is a fixed px
// length), min-height to max(15px, 20/11 of the font size) when the height is automatic, and the UA
// sheet centers the value.
// It is a model, not an iPhone: it reproduces geometry, not pickers, zoom, keyboard or toolbars.
function replayIosTheme(locale) {
  const FMT = {
    date: { dateStyle: 'medium' },
    'datetime-local': { dateStyle: 'medium', timeStyle: 'short' },
    month: { month: 'long', year: 'numeric' },
    time: { timeStyle: 'short' },
  };
  // a px width or height from inline style or any same-origin rule that matches (approximate: ignores specificity)
  const fixedPx = (el, prop) => {
    if (/^\d+(\.\d+)?px$/.test(el.style[prop])) return true;
    let hit = false;
    const walk = (rules) => {
      for (const r of rules) {
        if (r.cssRules && !r.selectorText) { walk(r.cssRules); continue; }
        try { if (r.selectorText && el.matches(r.selectorText) && /^\d+(\.\d+)?px$/.test(r.style[prop])) hit = true; } catch (e) {}
      }
    };
    for (const sh of document.styleSheets) { try { walk(sh.cssRules); } catch (e) {} }
    return hit;
  };
  const out = [];
  for (const el of document.querySelectorAll('input[type]')) {
    const type = el.getAttribute('type').toLowerCase();
    if (!FMT[type]) continue; // week: WebKit measures it only when its week picker is enabled; not replayed
    const cs = getComputedStyle(el);
    if ((cs.appearance || cs.webkitAppearance) === 'none') { out.push({ type, replayed: false }); continue; }
    const ctx = document.createElement('canvas').getContext('2d');
    ctx.font = `${cs.fontStyle} ${cs.fontWeight} ${cs.fontSize} ${cs.fontFamily}`;
    let widest = 0;
    for (let m = 0; m < 12; m++) for (const d of [22, 28, 30]) {
      widest = Math.max(widest, ctx.measureText(new Intl.DateTimeFormat(locale, FMT[type]).format(new Date(2026, m, d, 22, 55))).width);
    }
    const fixed = fixedPx(el, 'width');
    if (!fixedPx(el, 'height')) el.style.setProperty('min-height', Math.max(15, Math.trunc((20 / 11) * parseFloat(cs.fontSize))) + 'px', 'important');
    if (!fixed) {
      el.style.setProperty('min-width', Math.ceil(widest) + 'px', 'important');
      el.style.setProperty('box-sizing', 'content-box', 'important');
    }
    el.style.setProperty('text-align', 'center', 'important');
    out.push({ type, replayed: true, fixedPxWidth: fixed });
  }
  return out;
}

function measure() {
  const R = (n) => Math.round(n * 100) / 100;
  const TEMPORAL = /^(date|time|datetime-local|month|week)$/;
  const de = document.documentElement, vw = de.clientWidth;
  const visible = (el) => { const r = el.getBoundingClientRect(); return r.width > 0 && r.height > 0 && getComputedStyle(el).visibility !== 'hidden'; };
  const contentRight = (el) => { const r = el.getBoundingClientRect(), cs = getComputedStyle(el); return r.right - parseFloat(cs.borderRightWidth) - parseFloat(cs.paddingRight); };
  const fields = [...document.querySelectorAll('input, select, textarea')]
    .filter((el) => !/^(hidden|checkbox|radio|submit|button|reset|image|file|range|color)$/i.test(el.getAttribute('type') || '') && visible(el))
    .map((el) => {
      const r = el.getBoundingClientRect(), cs = getComputedStyle(el);
      const type = (el.getAttribute('type') || el.tagName).toLowerCase();
      return { name: el.id || el.name || type, type, temporal: TEMPORAL.test(type),
        overParent: R(r.right - contentRight(el.parentElement)), overScreen: R(r.right - vw), h: R(r.height),
        fontPx: parseFloat(cs.fontSize), appearance: cs.appearance || cs.webkitAppearance, boxSizing: cs.boxSizing, textAlign: cs.textAlign };
    });
  const textH = fields.filter((f) => /^(text|email|tel|search|url|password|number)$/.test(f.type)).map((f) => f.h).sort((a, b) => a - b);
  const medText = textH.length ? textH[Math.floor(textH.length / 2)] : null;
  const vp = (document.querySelector('meta[name="viewport"]') || {}).content || '';
  const ms = /maximum-scale\s*=\s*([\d.]+)/i.exec(vp);
  return { vw, pageOverflow: R(de.scrollWidth - vw), fields, medText,
    zoomBlocked: /user-scalable\s*=\s*(no|0)/i.test(vp) || (ms && parseFloat(ms[1]) < 5) };
}

let failures = 0;
const say = (ok, label, msg) => { if (!ok) failures++; console.log(`  ${ok ? 'PASS' : 'FAIL'}  ${label}  ${msg}`); };

for (const [name, type, profile] of [['webkit', webkit, 'iPhone 13'], ['chromium', chromium, 'Pixel 7']]) {
  const browser = await type.launch();
  console.log(`\n== ${name} ${browser.version()}${name === 'webkit' && REPLAY ? ' + iOS theme replay (a model, not an iPhone)' : ''}`);
  for (const url of urls) for (const width of WIDTHS) {
    const ctx = await browser.newContext({ ...devices[profile], viewport: { width, height: 844 } });
    const page = await ctx.newPage();
    await page.goto(url, { waitUntil: 'load' });
    await page.evaluate(() => document.fonts.ready);
    if (name === 'webkit' && REPLAY) await page.evaluate(replayIosTheme, LOCALE);
    const m = await page.evaluate(measure);
    const label = `${url} @${width}px`;
    const over = m.fields.filter((f) => f.overParent > TOL || f.overScreen > TOL);
    say(m.pageOverflow <= TOL, label, `page wider than the screen by ${m.pageOverflow}px`);
    say(!over.length, label, over.length ? `fields past their box: ${over.map((f) => `${f.name} +${Math.max(f.overParent, f.overScreen)}px`).join(', ')}` : 'no field past its box');
    const temporal = m.fields.filter((f) => f.temporal);
    if (temporal.length && m.medText != null) {
      const tall = temporal.filter((f) => Math.abs(f.h - m.medText) > 1);
      say(!tall.length, label, tall.length ? `date/time fields ${tall.map((f) => f.h).join('/')}px tall vs text fields ${m.medText}px` : 'date/time fields match the text field height');
    }
    if (name === 'webkit') { // CSS facts, the same in both engines: report them once
      const native = temporal.filter((f) => f.appearance !== 'none');
      if (temporal.length) say(!native.length, label, native.length ? `${native.length} date/time field(s) keep native appearance (iOS applies its min-width, content-box, min-height)` : 'date/time fields have appearance: none');
      const small = m.fields.filter((f) => f.fontPx < 16);
      say(!small.length, label, small.length ? `${small.length} field(s) under 16px font, iPhone zooms on focus: ${small.slice(0, 4).map((f) => `${f.name} ${f.fontPx}px`).join(', ')}` : 'every field at 16px or more');
      say(!m.zoomBlocked, label, m.zoomBlocked ? 'viewport meta blocks zoom (maximum-scale < 5 or user-scalable=no)' : 'viewport meta allows zoom');
    }
    await ctx.close();
  }
  await browser.close();
}
console.log(`\n${failures ? `${failures} check(s) failed` : 'all checks passed'}`);
process.exit(failures ? 1 : 0);
```

What the output looks like on a form with the bug (fields with 1rem of side padding and a 15.2px
font, two of them in a `1fr 1fr` grid):

```text
== webkit 26.4 + iOS theme replay (a model, not an iPhone)
  FAIL  test-form.html @390px  fields past their box: dob +34.66px, in +34.66px, out +34.66px
  FAIL  test-form.html @390px  date/time fields 56.84/56.84/56.84px tall vs text fields 47.84px
  FAIL  test-form.html @390px  3 date/time field(s) keep native appearance (iOS applies its min-width, content-box, min-height)
  FAIL  test-form.html @390px  5 field(s) under 16px font, iPhone zooms on focus: name 15.2px, dob 15.2px, in 15.2px, out 15.2px
== chromium 147.0.7727.15
  FAIL  test-form.html @320px  page wider than the screen by 77px
  FAIL  test-form.html @320px  fields past their box: out +77.38px
  FAIL  test-form.html @320px  date/time fields 49.19/49.19/49.19px tall vs text fields 46.19px
```

Read it this way:

- **WebKit fails, Chromium passes on width**: the iOS date problem. Fix 4.1.
- **Both fail on width**: a layout problem that isn't iPhone-specific, usually a grid or flex
  container that can't shrink (the Chromium lines above are a bare `1fr 1fr` grid). Fix 4.2.
- **Chromium date fields 1 to 3px taller**: the desktop engines pad the date edit box. Fix 4.1
  covers it.
- **Font under 16px**: fix 4.3.

What the script cannot tell you, so don't let a pass claim it:

- [ ] The replay is a model of WebKit's source, not an iPhone. It reproduces geometry only.
- [ ] Before spring 2025 (WebKit commit 292441@main, most likely shipped in an iOS 18 update; Apple's
      notes don't say), iOS overwrote `width` itself instead of setting a floor. iPhones still on an older
      iOS can look worse than the replay.
- [ ] iOS measures the date in the device locale with its own estimator; the replay measures sample
      dates on a canvas in `IOS_LOCALE`. Expect a few pixels of difference.
- [ ] The replay keeps the padding you set, as WebKit's newer iOS form-control code does. Older
      iOS code replaced side padding with half an em, so on those iPhones a field overshoots by
      about 1em plus its border, not by your padding.
- [ ] Fixed-width detection only recognizes px widths, reads same-origin stylesheets and ignores
      specificity. iOS also counts rem and em widths as fixed.
- [ ] No pickers, no focus zoom, no keyboard, no toolbar, no safe areas. Those need a device (section 5).
- [ ] Chromium here is desktop Blink at phone size, not Chrome for Android. Android Chrome had its
      own date-input sizing rules until Chrome 154, which is rolling out from late September 2026.

---

## 4. Fixes

### 4.1 Date and time fields

Put this after your own field styles. It sets geometry only, so the fields must already carry the
same class as your text fields (padding, border, radius, background, font, colors). If they don't,
add that class first, or you trade the iOS pill for a bare box.

```css
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"],
input[type="week"] {
  -webkit-appearance: none; /* iOS before 15.4 only reads the prefixed form */
  appearance: none;         /* turns off the iOS min-width, content-box and min-height step */
  display: block;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  text-align: left;
}

/* iOS centers the value; an empty field collapses without a height (WebKit bug 198959) */
input[type="date"]::-webkit-date-and-time-value,
input[type="time"]::-webkit-date-and-time-value,
input[type="datetime-local"]::-webkit-date-and-time-value,
input[type="month"]::-webkit-date-and-time-value,
input[type="week"]::-webkit-date-and-time-value {
  margin: 0;
  text-align: left;   /* or start, for right-to-left pages */
  min-height: 1.2em;  /* for engines without the lh unit */
  min-height: 1lh;
}

/* desktop engines pad the edit box, which makes date fields a pixel or two taller */
input::-webkit-datetime-edit { padding: 0; }
input::-webkit-datetime-edit-fields-wrapper { padding: 0; }
input::-webkit-calendar-picker-indicator { padding-block: 0; margin-block: 0; cursor: pointer; }

/* a dark theme: draw the calendar icon light on a dark field (use your own dark selector) */
[data-theme="dark"] input[type="date"] { color-scheme: dark; }
```

Checks after applying:

- [ ] The script shows no field past its box in WebKit with the replay, at all four widths
- [ ] Date fields match the text field height within 1px in both engines
- [ ] On an iPhone, an empty date field is as tall as a filled one (WebKit bug 198959)
- [ ] On an iPhone, the value sits vertically centered. WebKit bug 139848 reports that
      `display: block` can misalign it; if it does, keep `display: flex; align-items: center` on the
      input instead
- [ ] A blank date field on iOS has no icon and no hint, so it has a visible `<label>`

Untested here: WebKit's built-in stylesheet also pads each date segment by 1px on the Mac. If a Mac shows the date
fields slightly taller, add `input::-webkit-datetime-edit-month-field { padding-block: 0; }` and
the same for `day-field` and `year-field`, one rule each.

When to leave a field alone: a date input left at its default width, on a line with room for it, can
keep the native look; a fixed pixel width that fits your narrowest screen also skips the width step.

### 4.2 Containers that won't shrink

A flex item's automatic minimum width is its content, and a bare `1fr` grid track is
`minmax(auto, 1fr)`. One wide child pushes the whole column off the screen.

```css
form fieldset,
form .form-group,
form .grid > *,
form .flex > * { min-width: 0; }

form input, form select, form textarea { max-width: 100%; }

/* two columns on wide screens, one on phones, never wider than the form */
form .grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
```

On an iPhone, `min-width: 0` on the wrapper does not stop a date field that still has its native
appearance: the theme sets the field's own min-width. You need 4.1 and 4.2 together.

### 4.3 Focus zoom

```css
input, select, textarea { font-size: 16px; }   /* or font: inherit, with a 16px body */
```

Do not use `maximum-scale=1` or `user-scalable=no` instead. Safari ignores `user-scalable` for pinch
zoom since iOS 10, but in-app web views honor it by default, Android Chrome honors it, and it takes
zoom away from people with low vision (WCAG 1.4.4). Lighthouse fails the page for it.

### 4.4 Full-height layouts

```css
.full-height {
  min-height: 100vh;   /* older browsers */
  min-height: 100svh;  /* Safari 15.4 and later: the viewport with the toolbars showing */
}
```

`vh` is the large viewport, measured with the toolbars retracted, so a `100vh` form can put its submit
button under Safari's toolbar. Prefer `svh` for layout; `dvh` tracks the toolbar but is throttled
rather than updated every frame. None of these units include the on-screen keyboard.

### 4.5 Fixed bottom bars and the keyboard

iOS resizes only the visual viewport when the keyboard opens; `position: fixed` stays relative to the
layout viewport. `interactive-widget=resizes-content` doesn't work in Safari, and neither does the
VirtualKeyboard API. The VisualViewport API does:

```js
// keep a fixed bottom bar above the iOS keyboard
const bar = document.querySelector('.bottom-bar');
if (bar && window.visualViewport) {
  const place = () => {
    const vv = window.visualViewport;
    const covered = window.innerHeight - vv.height - vv.offsetTop;
    bar.style.transform = covered > 0 ? `translateY(${-covered}px)` : '';
  };
  window.visualViewport.addEventListener('resize', place);
  window.visualViewport.addEventListener('scroll', place);
}
```

The simpler alternative: don't pin actions to the bottom while a field has focus. Test either on a
device; iOS 26.0 had a fixed-position bug after keyboard dismissal (WebKit bug 297779, reported fixed in 26.1).

### 4.6 Safe areas

With `viewport-fit=cover` in the viewport meta, pad anything fixed to the bottom:

```css
.bottom-bar { padding-bottom: max(12px, env(safe-area-inset-bottom)); }
```

### 4.7 Floating buttons and widgets

Chat bubbles, cookie bars, back-to-top and accessibility buttons cover the last field and the submit
button on narrow screens. Two options:

```css
/* reserve a gutter on form pages at phone widths: the buttons' offset + their width + some air */
@media (max-width: 600px) {
  body:has(form) main { padding-right: calc(10px + 44px + 6px); }
}

/* or collapse a chat bubble while any field has focus */
body:has(:is(input, select, textarea):focus) .chat-bubble { display: none; }
```

Don't hide accessibility controls to tidy a form. Give them room instead.

### 4.8 Numbers that aren't quantities

```html
<!-- card numbers, ZIP codes, one-time codes: number pad, no spinner, no rounding -->
<input type="text" inputmode="numeric" pattern="[0-9]*">

<!-- money: the decimal pad has a decimal point -->
<input type="text" inputmode="decimal">
```

On iOS, `type="number"` gives the full keyboard on its numbers page unless `pattern` is exactly
`[0-9]*` or `\d*`. The iPhone number pad has no minus sign or decimal point, so `inputmode="numeric"`
can't take negatives or decimals (inferred from the keyboard type; check on a device).

### 4.9 Autofill colors

WebKit's built-in stylesheet paints autofilled fields `#FAFFBD` with black text, marked `!important`,
so you can't restyle the background directly. The common community workaround, not documented by
WebKit, so test it on a device:

```css
input:-webkit-autofill {
  box-shadow: 0 0 0 1000px var(--field-bg) inset;
  -webkit-text-fill-color: var(--field-fg);
}
```

### 4.10 Selects

`appearance: none` on a `<select>` removes the chevron iOS paints, so draw your own arrow (a
`background-image`) if you extend 4.1 to selects. Safari 27.0 (September 2026) adds customizable
selects with `appearance: base-select`; older iPhones fall back to the native control, so treat it as
an enhancement.

---

## 5. The real-device pass

Fifteen minutes with an iPhone confirms what no script can.

- [ ] Open the form in Safari and in the Chrome app. They share one engine, so they should match.
- [ ] Every date field lines up with the text fields, value on the left; an empty one is as tall as a
      filled one
- [ ] Tap every field: the page does not zoom
- [ ] Tap a date field: the native picker opens
- [ ] With the keyboard open, scroll to the submit button: nothing fixed covers it
- [ ] Rotate to landscape and back; nothing ends up off screen
- [ ] Try a larger text size (Safari's page zoom, or your site's own text size control) and repeat
- [ ] Switch the phone to dark mode if your site follows `prefers-color-scheme`, and repeat

No iPhone? A paid cloud real-device service, or `ios-webkit-debug-proxy` over USB with a borrowed
phone (it runs on Windows, Linux and macOS; its README warns of major discrepancies with Chrome
DevTools). With a Mac: Xcode's iOS Simulator runs real iOS WebKit, and Safari's Web Inspector
attaches to it or to a cabled iPhone (on the phone: Settings, Apps, Safari, Advanced, Web Inspector).

---

## 6. Prompt for an AI coding agent

Save this file at your project root as `WEBKIT-CHECK.md`, and add one line to `AGENTS.md` or
`CLAUDE.md`: `Read WEBKIT-CHECK.md before writing any form CSS.` Then paste this:

```text
You are auditing this repository for iPhone form problems. Every browser on an iPhone runs WebKit,
and iOS restyles some form controls after the page's CSS. Read WEBKIT-CHECK.md in the project root
first; it is the spec, and its section numbers are referenced below.

1. Run the searches in section 1 across templates, HTML, JSX, components and stylesheets. For every
   hit, record file:line and what it means, using the table in section 1.
2. For every date, time, datetime-local, month and week input, find the CSS that reaches it (its
   classes, type selectors, framework classes). Report whether it gets -webkit-appearance: none and
   appearance: none, width 100% with box-sizing border-box, and a left or start text-align on
   ::-webkit-date-and-time-value.
3. Report every input, select and textarea whose font-size resolves below 16px, and every one that
   sets no font-size at all (iOS defaults form controls to 11px).
4. Propose the smallest patch for each finding, using the snippets in section 4. Reuse the classes
   the text fields already use; do not restate the fields' look. Do not add maximum-scale or
   user-scalable=no. Do not hide accessibility controls. Do not replace native date inputs with a
   JavaScript picker.
5. If Node is available, run the section 3 script against the pages with forms (a local dev server
   URL or file:// paths) before and after the patch, and include both outputs.
6. Report: a table of findings (file:line, problem, fix), the diff, the before and after script
   output, and the list of things from section 5 that still need a real iPhone.

Do not say anything renders correctly on iOS. The script replays iOS behavior from WebKit's source;
only a device confirms it.
```

---

## 7. Sources

- Apple App Review Guideline 2.5.6: https://developer.apple.com/app-store/review/guidelines/#2.5.6
- Chrome on iOS uses WebKit: https://developer.chrome.com/docs/web-platform/blink
- Firefox for iOS does not use Gecko: https://firefox-source-docs.mozilla.org/overview/ios.html
- Alternative engines in the EU: https://developer.apple.com/support/alternative-browser-engines/
- Alternative engines in Japan: https://www.apple.com/newsroom/2025/12/apple-announces-changes-to-ios-in-japan/
- No shipped ported engine as of June 2026: https://open-web-advocacy.org/blog/28-percent-faster--the-blink-prototype-that-shows-why-apples-ios-browser-engine-ban-must-end/
- Date inputs get a button appearance on iOS: https://github.com/WebKit/WebKit/blob/ae2aca5d8313f4aa421b26869a831de014e2bb0c/Source/WebCore/rendering/RenderTheme.cpp#L398
- The early return for appearance none: https://github.com/WebKit/WebKit/blob/ae2aca5d8313f4aa421b26869a831de014e2bb0c/Source/WebCore/rendering/RenderTheme.cpp#L277
- Min-width floor, content-box, min-height: https://github.com/WebKit/WebKit/blob/ae2aca5d8313f4aa421b26869a831de014e2bb0c/Source/WebCore/rendering/ios/RenderThemeIOS.mm#L495-L545
- The same logic in the newer form controls: https://github.com/WebKit/WebKit/blob/ae2aca5d8313f4aa421b26869a831de014e2bb0c/Source/WebCore/rendering/cocoa/RenderThemeCocoa.mm#L3175
- The date strings iOS measures: https://github.com/WebKit/WebKit/blob/ae2aca5d8313f4aa421b26869a831de014e2bb0c/Source/WebCore/platform/text/cocoa/LocalizedDateCache.mm#L100-L128
- The built-in stylesheet (11px controls, centered date value, autofill color): https://github.com/WebKit/WebKit/blob/ae2aca5d8313f4aa421b26869a831de014e2bb0c/Source/WebCore/css/html.css
- One value box instead of segments on iOS: https://github.com/WebKit/WebKit/blob/ae2aca5d8313f4aa421b26869a831de014e2bb0c/Source/WebCore/html/BaseDateAndTimeInputType.cpp#L376
- Focus zoom: https://github.com/WebKit/WebKit/blob/ae2aca5d8313f4aa421b26869a831de014e2bb0c/Source/WebKit/UIProcess/API/ios/WKWebViewIOS.mm#L1718-L1768
- Number keyboards: https://github.com/WebKit/WebKit/blob/ae2aca5d8313f4aa421b26869a831de014e2bb0c/Source/WebKit/UIProcess/ios/WKContentViewInteraction.mm#L7456-L7460
- The 2025 width change: https://commits.webkit.org/292441@main and https://bugs.webkit.org/show_bug.cgi?id=290080
- Empty date field height: https://bugs.webkit.org/show_bug.cgi?id=198959
- Value misaligned with display block: https://bugs.webkit.org/show_bug.cgi?id=139848
- Fixed elements after keyboard dismissal on iOS 26.0: https://bugs.webkit.org/show_bug.cgi?id=297779
- Bootstrap's date input workaround: https://github.com/twbs/bootstrap/blob/main/scss/forms/_form-control.scss
- Playwright's WebKit builds: https://playwright.dev/docs/browsers and https://github.com/microsoft/playwright/tree/main/browser_patches/webkit
- Playwright device emulation: https://playwright.dev/docs/emulation
- appearance support: https://developer.mozilla.org/en-US/docs/Web/CSS/appearance
- Viewport units: https://www.w3.org/TR/css-values-4/#viewport-relative-units, https://webkit.org/blog/12445/new-webkit-features-in-safari-15-4/ and https://web.dev/blog/viewport-units
- Keyboard and the visual viewport: https://developer.chrome.com/blog/viewport-resize-behavior
- Safari and interactive-widget: https://github.com/WebKit/standards-positions/issues/65
- Safe areas: https://webkit.org/blog/7929/designing-websites-for-iphone-x/
- user-scalable ignored by Safari since iOS 10: https://developer.apple.com/library/archive/releasenotes/General/WhatsNewInSafari/Articles/Safari_10_0.html
- In-app web views honor viewport scale limits by default: https://developer.apple.com/documentation/webkit/wkwebviewconfiguration/ignoresviewportscalelimits
- Lighthouse viewport audit: https://github.com/GoogleChrome/lighthouse/blob/main/core/audits/accessibility/meta-viewport.js
- Flex and grid automatic minimums: https://www.w3.org/TR/css-flexbox-1/#min-size-auto and https://www.w3.org/TR/css-grid-1/
- Numbers that aren't quantities: https://technology.blog.gov.uk/2020/02/24/why-the-gov-uk-design-system-team-changed-the-input-type-for-numbers/
- :autofill: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/:autofill
- Customizable select in Safari 27.0: https://webkit.org/blog/18325/webkit-features-for-safari-27-0/
- Inspecting iOS with Web Inspector: https://developer.apple.com/documentation/safari-developer-tools/inspecting-ios
- ios-webkit-debug-proxy: https://github.com/google/ios-webkit-debug-proxy

---

Free checkers at https://jwatte.com/tools/ : the Mega Analyzer (https://jwatte.com/tools/mega-analyzer/)
flags date and time inputs with no `appearance: none` in the CSS it can read and text fields under
16px, the WCAG Accessibility
Audit (https://jwatte.com/tools/wcag-accessibility-audit/), the WCAG Fix Generator
(https://jwatte.com/tools/wcag-fix-generator/) and Mobile Parity (https://jwatte.com/tools/mobile-parity/).
Browser-side, no signup, nothing uploaded.

Written by J.A. Watte. https://jwatte.com