From 938fdafcaf254097518b79497e8bd93017d84b5b Mon Sep 17 00:00:00 2001 From: Fisto Date: Tue, 22 Sep 2026 13:44:11 +0200 Subject: [PATCH] Stop the mobile focus zoom on text fields --- CURRENT.md | 6 ++++++ poc/public/style.css | 27 +++++++++++++++++++++++++++ 2 files changed, 33 insertions(+) diff --git a/CURRENT.md b/CURRENT.md index d8c79a5..d5a08fe 100644 --- a/CURRENT.md +++ b/CURRENT.md @@ -40,6 +40,12 @@ mobile draft at 390px. - [x] C11 preview caching: Discord-hosted image/GIF previews (WebP 320px, hash-addressed, 5 MiB cap, one attempt) run after every walk in both modes. Live run `...-20260916090722`: `previewed: 2`; thumbs served over `/api/media///thumb` (200). + - [x] C79 Mobile form controls and the focus zoom. iOS Safari zooms the page when a focused + text field renders below 16px and does not always zoom back out. `style.css` now forces 16px + on text-entry controls at the mobile breakpoint (25 fields were under 16px, the smallest 11px), + sets `text-size-adjust: 100%`, and adds `touch-action: manipulation` to controls. Sliders keep + their own font size so em-based thumbs do not resize; desktop sizes are unchanged. Verified at + 390px: no field under 16px, no horizontal overflow, desktop still 13.5px. - [x] C78 Chat starts on the newest message. `renderMessages` pins the scroll when the channel changes or the user is already at the bottom, re-pins on the next frame and after 120/400 ms, and re-pins on late image loads while pinned. `overflow-anchor: none` on `.vk-message-scroll` diff --git a/poc/public/style.css b/poc/public/style.css index afbcf10..d5d0d32 100644 --- a/poc/public/style.css +++ b/poc/public/style.css @@ -2136,3 +2136,30 @@ a.vk-attachment:hover { right: calc(50% - 26px); } } + +/* ── Mobile form controls ───────────────────────────────────────────────────── + iOS Safari zooms the whole page when a focused text field renders below 16px, + and it does not always zoom back out when the field loses focus. Force 16px + on text-entry controls at the mobile breakpoint, stop the landscape text + inflation, and drop the double-tap zoom delay on controls. Sliders, check- + boxes, and radios keep their current sizing (they never trigger focus zoom, + and em-based slider thumbs must keep their own font size). */ +html { + -webkit-text-size-adjust: 100%; + text-size-adjust: 100%; +} + +input, +textarea, +select, +button { + touch-action: manipulation; +} + +@media (max-width: 768px) { + input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), + textarea, + select { + font-size: 16px !important; + } +}