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.
Jacek Rozanski
Senior PHP/Symfony developer and DevOps engineer with 20+ years of professional experience, running opcode.pl (web development agency, est. 2004).
Day job: I'm the sole backend developer at merketing company where I own and maintain 11 PHP/Symfony microservices on AWS (ECS Fargate, RDS, S3, CloudFront), handle the full CI/CD pipeline (Bitbucket Pipelines, Docker), and manage monitoring with Sentry and CloudWatch. These services handle high request volumes in production every month.
What I bring to AI-built apps:
- I audit and fix security issues (OWASP methodology), performance bottlenecks, and architectural problems in codebases generated by Cursor, Claude Code, Lovable, Bolt, and v0
- I refactor AI-generated prototypes into production-grade applications with proper error handling, testing, and clean architecture (SOLID, DDD, hexagonal architecture)
- I set up the infrastructure AI tools don't touch: AWS hosting, CI/CD pipelines, automated deployments, database optimization, monitoring, and alerting
- I integrate external services: payment providers, email systems, partner APIs, SSO/auth
Tech stack: PHP 8.x, Symfony, React, Next.js, PostgreSQL, MySQL, Docker, AWS (ECS, RDS, S3, SQS/SNS, CloudFront), Terraform, Supabase. I also use AI tools daily (Claude Code, Cursor) in my own workflow, so I understand both the strengths and the gaps in AI-generated code.
Based in Poland (CET timezone). Available for async work and calls during EU/US business hours.
Meïr Ankri
Full-stack developer specializing in React / Next.js / Node.js with 6+ years of experience. I've worked across various sectors including automotive (Reezocar/Société Générale), healthcare (Medical Link SaaS), and e-commerce (Glasman). I build web apps end-to-end, from architecture to production, with a focus on scalability, performance, and code quality. I also mentor junior developers and contribute to technical decisions and code reviews.
Daniel Vázquez
Software Engineer with over 10 years of experience on Startups, Government, big tech industry & consulting.
Matthew Jordan
I've been working at a large software company named Kainos for 2 years, and mainly specialise in Platform Engineering. I regularly enjoy working on software products outside of work, and I'm a huge fan of game development using Unity. I personally enjoy Python & C# in my spare time, but I also specialise in multiple different platform-related technologies from my day job.
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.
MFox
Full-stack professional senior engineer (15+years). Extensive experience in software development, qa, and IP networking.
BurnHavoc
Been around fixing other peoples code for 20 years.
Omar Faruk
As a Product Engineer at Klasio, I contributed to end-to-end product development, focusing on scalability, performance, and user experience.
My work spanned building and refining core features, developing dynamic website templates, integrating secure and reliable payment gateways, and optimizing the overall system architecture.
I played a key role in creating a scalable and maintainable platform to support educators and learners globally.
I'm enthusiastic about embracing new challenges and making meaningful contributions.
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 : )
prajwalfullstack
Hi Im a full stack developer, a vibe coded MVP to Market ready product, I'm here to help
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.