fix: iOS Safari keyboard/autofill loop — viewport + layout fixes

Ravi Singh · Ravi Singh · commit baf9d3c4025e · 2026-04-16T13:56:06.000+05:30
Root cause: iOS Safari resizes the visual viewport when autofill bar
appears, which triggers layout reflow on fixed/100vh containers,
which re-triggers autofill detection, creating an infinite loop.

Fixes:
- viewport meta: maximum-scale=1, user-scalable=no (prevents zoom)
- html/body overflow:hidden, #root handles scrolling (prevents reflow)
- Login container uses min-h-[100dvh] instead of fixed positioning
- Removed font-size:16px !important hack (viewport meta handles it)
diff --git a/pwa/client/index.html b/pwa/client/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
 <head>
   <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" />
   <meta name="theme-color" content="#0F172A" />
   <meta name="apple-mobile-web-app-capable" content="yes" />
   <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
diff --git a/pwa/client/src/index.css b/pwa/client/src/index.css
@@ -44,13 +44,17 @@ html.light input, html.light select { background: #F8FAFC !important; color: #0F
 html, body, #root {
   height: 100%;
   overscroll-behavior: none;
+  /* Prevent iOS Safari from resizing layout when keyboard/autofill appears */
+  overflow: hidden;
 }
 
-/* Prevent iOS auto-zoom on input focus (requires 16px minimum) */
-input, select, textarea {
-  font-size: 16px !important;
+#root {
+  overflow: auto;
+  -webkit-overflow-scrolling: touch;
 }
 
+/* iOS viewport zoom prevention is handled by meta viewport tag */
+
 body {
   font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
   -webkit-tap-highlight-color: transparent;
diff --git a/pwa/client/src/pages/Login.jsx b/pwa/client/src/pages/Login.jsx
@@ -114,7 +114,7 @@ export default function Login() {
   };
 
   return (
-    <div className="fixed inset-0 flex flex-col items-center justify-center px-6 bg-slate-950 overflow-auto">
+    <div className="min-h-[100dvh] flex flex-col items-center justify-center px-6 bg-slate-950">
       {/* Logo */}
       <div className="mb-10 text-center">
         <div className="inline-flex items-center justify-center w-20 h-20 rounded-2xl bg-water/10 mb-4">
