Windsurf
mobile
Fixed Position Elements Broken in iOS Safari on Windsurf App
Fixed-position elements in your Windsurf-generated app — sticky headers, bottom navigation bars, floating action buttons, modals — behave erratically in iOS Safari. They jump when scrolling, disappear behind the keyboard when typing, or drift out of position when the address bar shows or hides.
iOS Safari handles position: fixed differently from desktop browsers and even Android Chrome. The viewport dynamically resizes as the address bar and toolbar show/hide during scrolling, and the virtual keyboard pushes fixed elements around instead of overlaying them. This affects millions of iPhone users.
You might see a bottom navigation bar floating in the middle of the screen, a fixed header that bounces during scroll, a modal that's half-hidden behind the keyboard, or a chat input fixed to the bottom that jumps above the keyboard and back.
Error Messages You Might See
Fixed header jumps on iOS Safari scroll
Bottom navigation hidden behind keyboard
Modal not visible when keyboard is open
Position fixed not working inside transform parent
100vh is taller than visible area on iOS
Common Causes
- Dynamic viewport height changes — iOS Safari's address bar show/hide changes the viewport height, causing fixed elements using vh units to jump
- Virtual keyboard pushing layout — When the keyboard opens, iOS resizes the visual viewport but doesn't always reposition fixed elements correctly
- Momentum scrolling conflicts — iOS's elastic bounce scrolling (-webkit-overflow-scrolling: touch) interferes with fixed positioning inside scrollable containers
- Transform on parent elements — A CSS transform on any ancestor creates a new containing block, making position: fixed behave like position: absolute
- Safe area not accounted for — Fixed bottom elements are hidden behind the iPhone home indicator bar or notch
How to Fix It
- Use dvh instead of vh — Replace 100vh with 100dvh (dynamic viewport height) which accounts for the iOS address bar. Fallback: height: -webkit-fill-available
- Handle keyboard with visualViewport API — Listen to window.visualViewport resize events to reposition fixed elements when the keyboard opens
- Add safe area insets — Use env(safe-area-inset-bottom) padding on fixed bottom elements to avoid the iPhone home indicator
- Avoid transforms on parent elements — If a fixed element's ancestor has transform, will-change, or filter, move the fixed element outside that ancestor in the DOM
- Use position: sticky instead — For headers, position: sticky within a scroll container often works more reliably than position: fixed on iOS
- Test on a real iPhone — iOS Safari bugs cannot be reproduced in Chrome DevTools mobile simulation. Test on an actual device or BrowserStack
Real developers can help you.
Prakash Prajapati
I’m a Senior Python Developer specializing in building secure, scalable, and highly available systems. I work primarily with Python, Django, FastAPI, Docker, PostgreSQL, and modern AI tooling such as PydanticAI, focusing on clean architecture, strong design principles, and reliable DevOps practices. I enjoy solving complex engineering problems and designing systems that are maintainable, resilient, and built to scale.
Sage Fulcher
Hey I'm Sage! Im a Boston area software engineer who grew up in South Florida. Ive worked at a ton of cool places like a telehealth kidney care startup that took part in a billion dollar merger (Cricket health/Interwell health), a boutique design agency where I got to work on a ton of exciting startups including a photography education app, a collegiate Esports league and more (Philosophie), a data analytics as a service startup in Cambridge (MA) as well as at Phillips and MIT Lincoln Lab where I designed and developed novel network security visualizations and analytics. I've been writing code and furiously devoted to using computers to make people’s lives easier for about 17 years. My degree is in making computers make pretty lights and sounds. Outside of work I love hip hop, the Celtics, professional wrestling, magic the gathering, photography, drumming, and guitars (both making and playing them)
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.
Bastien Labelle
Full stack dev w/ 20+ years of experience
Vlad Temian
15+ years shipping production infrastructure for startups. Former CTO at qed.builders (acquired by The Sandbox).
Cursor ambassador and agentic tooling builder.
I've scaled systems, automated deployments, and built observability tools for AI coding workflows. I specialize in taking vibe-coded apps from broken prototype to production-ready: fixing Supabase auth/RLS, Stripe integrations, deployment pipelines, and cleaning up AI-generated spaghetti.
I build tools in this space (agentprobe, claudebin, micode) and understand both sides: how AI generates code and why it breaks.
https://blog.vtemian.com/
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.
Jared Hasson
Full time lead founding dev at a cyber security saas startup, with 10 yoe and a bachelor's in CS. Building & debugging software products is what I've spent my time on for forever
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
zipking
I am a technologist and product builder dedicated to creating high-impact solutions at the intersection of AI and specialized markets. Currently, I am focused on PropScan (EstateGuard), an AI-driven SaaS platform tailored for the Japanese real estate industry, and exploring the potential of Archify.
As an INFJ-T, I approach development with a "systems-thinking" mindset—balancing technical precision with a deep understanding of user needs. I particularly enjoy the challenge of architecting Vertical AI SaaS and optimizing Small Language Models (SLMs) to solve specific, real-world business problems. Whether I'm in a CTO-level leadership role or hands-on with the code, I thrive on building tools that turn complex data into actionable value.
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 100vh not work on iOS Safari?
iOS Safari defines 100vh as the height of the viewport with the address bar hidden (the tallest possible height). When the address bar is visible, the actual visible area is smaller than 100vh, causing overflow. Use 100dvh or -webkit-fill-available instead.
Can I detect when the iOS keyboard is open?
Use the Visual Viewport API: window.visualViewport.height will be smaller than window.innerHeight when the keyboard is open. Listen to the resize event on window.visualViewport to react to keyboard show/hide.