From 3a7a0265332aa032bc7f88299bb4e5a04614bcc2 Mon Sep 17 00:00:00 2001 From: sravan Date: Sun, 19 Jul 2026 08:31:32 +0530 Subject: [PATCH] mobile PWA: fix keyboard zoom (16px inputs) + composer lift via VisualViewport (batch132) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit iOS home-screen PWAs IGNORE viewport maximum-scale (Apple disabled it for accessibility), so the maximum-scale=1 that stops auto-zoom in the Capacitor WebView does nothing in the PWA — it still zooms on input focus. Real cross-platform fix: make every focusable text field 16px on mobile (the composer was .92rem). autoGrow's empty-guard keeps it one line. Also the PWA has no Capacitor Keyboard plugin, so the composer never lifted above the keyboard ("not the same keyboard"). Added a VisualViewport-based lift for non-native clients (browser + PWA); native still uses the plugin. >100px threshold ignores the Safari toolbar. Co-Authored-By: Claude Opus 4.8 --- server/public/home.html | 19 ++++++++++++++++++- 1 file changed, 18 insertions(+), 1 deletion(-) diff --git a/server/public/home.html b/server/public/home.html index 0d1fb1c..4bcfad5 100644 --- a/server/public/home.html +++ b/server/public/home.html @@ -1095,6 +1095,11 @@ the keyboard is up, so --sab collapses to 0. */ body.chat-open .content .panel{bottom:calc(var(--sab) + var(--kb));transition:bottom .25s cubic-bezier(.17,.59,.4,1);} body.kb-open{--sab:0px;} + /* iOS: a home-screen PWA IGNORES maximum-scale, so it auto-zooms the page on focus of any input under + 16px (the Capacitor WebView respects maximum-scale, which is why the zoom only shows up in the PWA). + Making every focusable text field exactly 16px is the only reliable prevention — and it's belt-and- + suspenders for the native app too. autoGrow's empty-guard keeps the composer at one line despite this. */ + .composer-row input, .composer-row textarea, input[type="text"], input[type="search"], input[type="email"], input[type="tel"], input[type="url"], input[type="password"], input[type="number"], input:not([type]), textarea, select{font-size:16px;} /* Native-style push/pop: the conversation slides in from the right when opened and slides back out when you go back, so navigation has a clear direction (like Teams/WhatsApp). */ /* Native-style push/pop (like iOS/Teams): the conversation (.content) slides in from the right while @@ -1146,7 +1151,7 @@ -
Biz Connect
Loading…