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
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.
MFox
Full-stack professional senior engineer (15+years). Extensive experience in software development, qa, and IP networking.
Milan Surelia
Milan Surelia is a Mobile App Developer with 5+ years of experience crafting scalable, cross-platform apps at 7Span and Meticha. At 7Span, he engineers feature-rich Flutter apps with smooth performance and modern UI. As the Co-Founder of Meticha, he builds open-source tools and developer-focused products that solve real-world problems.
Expertise:
💡 Developing cross-platform apps using Flutter, Dart, and Jetpack Compose for Android, iOS, and Web.
🖋️ Sharing insights through technical writing, blogging, and open-source contributions.
🤝 Collaborating closely with designers, PMs, and developers to build seamless mobile experiences.
Notable Achievements:
🎯 Revamped the Vepaar app into Vepaar Store & CRM with a 2x performance boost and smoother UX.
🚀 Launched Compose101 — a Jetpack Compose starter kit to speed up Android development.
🌟 Open source contributions on Github & StackOverflow for Flutter & Dart
🎖️ Worked on improving app performance and user experience with smart solutions.
Milan is always happy to connect, work on new ideas, and explore the latest in technology.
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.
Kingsley Omage
Fullstack software engineer passionate about AI Agents, blockchain, LLMs.
legrab
I'll fill this later
Jaime Orts-Caroff
I'm a Senior Android developer, open to work in various fields
Simon A.
I'm a backend developer building APIs, emulators, and interactive game systems. Professionally, I've developed Java/Spring reporting solutions, managed relational and NoSQL databases, and implemented CI/CD workflows.
Matt Butler
Software Engineer @ AWS
David Olverson
Solo dev shipping production apps with AI-assisted development. I specialize in rescuing broken Lovable/Bolt/Cursor builds and taking them to production. 10+ apps shipped including SaaS CRMs, gaming platforms, real estate tools, and Discord bots. Stack: Next.js 16, TypeScript, Tailwind CSS, FastAPI, PostgreSQL, Prisma. I use Claude Code with 50+ custom skills for rapid delivery. Average turnaround: 2-4 weeks from broken prototype to production.
Anthony Akpan
Developer with 8 years of experience building softwares fro startups
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.