Bolt
mobile
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
No error messages - this is a UX behavior issue
Viewport meta tag warning in Lighthouse
Accessibility warning: maximum-scale prevents user zoom
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.
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
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.
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.
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.
Richard McSorley
Full-Stack Software Engineer with 8+ years building high-performance applications for enterprise clients. Shipped production systems at Walmart (4,000+ stores), Cigna (20M+ users), and Arkansas Blue Cross. 5 patents in retail/supply chain tech. Currently focused on AI integrations, automation tools, and TypeScript-first architectures.
Caio Rodrigues
I'm a full-stack developer focused on building practical and scalable web applications. My main experience is with **React, TypeScript, and modern frontend architectures**, where I prioritize clean code, component reusability, and maintainable project structures.
I have strong experience working with **dynamic forms, state management (Redux / React Hook Form), and complex data-driven interfaces**. I enjoy solving real-world problems by turning ideas into reliable software that companies can actually use in their daily operations.
Beyond coding, I care about **software quality and architecture**, following best practices for componentization, code organization, and performance optimization.
I'm also comfortable working across the stack when needed, integrating APIs, handling business logic, and helping transform prototypes into production-ready systems.
My goal is always to deliver solutions that are **simple, efficient, and genuinely useful for the people using them.**
AUXLE
I am a Full Stack Developer experienced in building Websites, Web apps and Cross Platform Mobile Apps for Startups and Companies.
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.
BurnHavoc
Been around fixing other peoples code for 20 years.
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.