Form Inputs Auto-Zooming on iOS in Bolt App
When users tap on input fields, text areas, or select dropdowns in your Bolt.new app on an iPhone or iPad, Safari automatically zooms into the field. The page stays zoomed in after the user finishes typing, forcing them to manually pinch-to-zoom out before they can continue using the app.
This is one of the most frustrating mobile UX issues because it happens on every single form interaction. Login forms, search bars, checkout fields, and contact forms all trigger the zoom. Users have to zoom out after every input, making forms feel broken and unprofessional.
The behavior is specific to iOS Safari and happens because Apple's browser auto-zooms on any input field with a font-size smaller than 16px. This is a deliberate accessibility feature to help users read small text, but it becomes a problem when your design uses 14px or 12px font sizes for inputs.
Error Messages You Might See
Common Causes
- Input font-size below 16px — iOS Safari triggers auto-zoom on any input, select, or textarea with computed font-size less than 16px
- Tailwind default text-sm on inputs — Bolt generated forms using text-sm (14px) or text-xs (12px) on input elements which triggers the zoom
- Viewport meta tag allows scaling — The viewport meta tag is either missing or configured to allow user scaling which enables the zoom behavior
- Inherited small font-size — A parent container sets font-size: 14px which cascades down to input elements
How to Fix It
- Set input font-size to 16px — The simplest fix: add text-base (16px) to all input, select, and textarea elements. This completely prevents iOS auto-zoom
- Add CSS for iOS inputs specifically — Use @supports (-webkit-touch-callout: none) { input, select, textarea { font-size: 16px !important; } }
- Configure viewport meta properly — Use <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" /> but note this disables all user zoom which is an accessibility concern
- Use Tailwind responsive classes — Apply text-sm on desktop and text-base on mobile: className="text-base md:text-sm" on input elements
- Create a global input style — In your global CSS, add: @media screen and (-webkit-min-device-pixel-ratio: 0) { input, select, textarea { font-size: 16px; } }
Real developers can help you.
Matt Butler
Software Engineer @ AWS
Mehdi Ben Haddou
- Founder of Chessigma (1M+ users) & many small projects
- ex Founding Engineer @Uplane (YC F25)
- ex Software Engineer @Amazon and @Booking.com
hanson1014
Full-stack developer experienced in fixing and deploying AI-generated apps from Lovable, Bolt.new, Cursor, and Replit. I specialize in debugging Supabase integration issues (auth flows, RLS policies, database connections), fixing broken deployments, resolving routing/blank screen problems, and cleaning up messy React/Vite codebases. I also build production apps with the Claude API and have shipped a Mac desktop dev tool (Nexterm from scratch. Based in Hong Kong, fast turnaround.
Luca Liberati
I work on monoliths and microservices, backends and frontends, manage K8s clusters and love to design apps architecture
Alvin Voo
I’ve watched the tech landscape evolve over the last decade—from the structured days of Java Server Pages to the current "wild west" of Agentic-driven development. While AI can "vibe" a frontend into existence, I specialize in the architecture that keeps it from collapsing.
My expertise lies in the critical backend infrastructure: the parts that must be fast, secure, and scalable. I thrive on high-pressure environments, such as when I had only three weeks to architect and launch an Ethereum redemption system with minimal prior crypto knowledge, turning it into a major revenue stream.
What I bring to your project:
Forensic Debugging: I don't just "patch" bugs; I use tools like Datadog and Explain Analyzers to map out bottlenecks and resolve root causes—like significantly reducing memory usage by optimizing complex DB joins.
Full-Stack Context: Deep experience in Node.js and React, ensuring backends play perfectly with mobile and web teams.
Sanity in the Age of AI: I bridge the gap between "best practices" and modern speed, ensuring your project isn't just built fast, but built to last.
Pratik
SWE with 15+ years of experience building and maintaining web apps and extensive BE infrastructure
Stanislav Prigodich
15+ years building iOS and web apps at startups and enterprise companies. I want to use that experience to help builders ship real products - when something breaks, I'm here to fix it.
legrab
I'll fill this later
BurnHavoc
Been around fixing other peoples code for 20 years.
Krishna Sai Kuncha
Experienced Professional Full stack Developer with 8+ years of experience across react, python, js, ts, golang and react-native. Developed inhouse websearch tooling for AI before websearch was solved : )
You don't need to be technical. Just describe what's wrong and a verified developer will handle the rest.
Get HelpFrequently Asked Questions
Why does iOS Safari zoom into form fields?
iOS Safari automatically zooms when users focus an input with a font-size below 16px. This is an accessibility feature to help users read small text. Setting all input font sizes to at least 16px prevents this behavior without affecting accessibility.
Is it okay to use maximum-scale=1 in the viewport meta tag?
Using maximum-scale=1 prevents the iOS zoom but also disables pinch-to-zoom for all users, which is an accessibility issue. The better solution is to set input font sizes to 16px, which prevents the auto-zoom while keeping pinch-to-zoom available.