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.
Tejas Chokhawala
Full-stack engineer with 5 years experience building production web apps using React, Next.js and TypeScript.
Focused on performance, clean architecture and shipping fast.
Experienced with Supabase/Postgres backends, Stripe billing, and building AI-assisted developer tools.
Yovel Cohen
I got a lot of experience in building Long-horizon AI Agents in production, Backend apps that scale to millions of users and frontend knowledge as well.
rayush33
JavaScript (React.js, React Native, Node.js) Developer with demonstrated industry experience of 4+ years, actively looking for opportunities to hone my skills as well as help small-scale business owners with solutions to technical problems
ISHANTDEEP SINGH
Senior Software Engineer with 7+ years of experience in React, JavaScript, TypeScript, Next.js, and Node.js. I’ve also worked as a tech lead for startups, owning end-to-end technical execution including architecture, development, scaling, and delivery. I bring a strong mix of hands-on coding, product thinking, and technical leadership, and I’m comfortable building products from scratch as well as improving and scaling existing systems.
Daniel Vázquez
Software Engineer with over 10 years of experience on Startups, Government, big tech industry & consulting.
Rudra Bhikadiya
I build and fix web apps across Next.js, Node.js, and DBs.
Comfortable jumping into messy code, broken APIs, and mysterious bugs.
If your project works in theory but not in reality, I help close that gap.
Franck Plazanet
I am a Strategic Engineering Leader with over 8 years of experience building high-availability enterprise systems and scaling high-performing technical teams. My focus is on bridging the gap between complex technology and business growth.
Core Expertise:
🚀 Leadership: Managing and coaching teams of 15+ engineers, fostering a culture of accountability and continuous improvement.
🏗️ Architecture: Enterprise Core Systems, Multi-system Integration (ERP/API/ETL), and Core Database Structure.
☁️ Cloud & Scale: AWS Expert; architected systems handling 10B+ monthly requests and managing 100k+ SKUs.
📈 Business Impact: Aligning tech strategy with P&L goals to drive $70k+ in monthly recurring revenue.
I thrive on "out-of-the-box" thinking to solve complex technical bottlenecks and am always looking for ways to use automation to improve business productivity.
Kingsley Omage
Fullstack software engineer passionate about AI Agents, blockchain, LLMs.
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 : )
Jaime Orts-Caroff
I'm a Senior Android developer, open to work in various fields
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.