Claude Code
mobile
Background Scroll Not Locked When Modal Is Open
When a modal, drawer, or overlay opens in your application, the background page continues to scroll on mobile devices. Users scrolling within the modal accidentally scroll the page behind it, losing their place. When the modal closes, the page has scrolled to a completely different position.
This is one of the most noticeable mobile UX bugs. It makes modals feel broken, confuses users, and creates a jarring experience. The issue is particularly bad on iOS Safari, which has unique scroll behavior that makes standard CSS solutions insufficient.
Claude Code typically generates modals that work well on desktop (where body overflow: hidden is sufficient) but break on mobile where touch scroll events propagate differently through the DOM.
Error Messages You Might See
Background scrolls behind modal on iPhone
Page jumps to top when modal opens
Scroll position lost after closing dialog
Cannot scroll modal content on mobile
Common Causes
- Only setting overflow: hidden on body — This works on desktop but iOS Safari ignores it for touch-initiated scrolls
- Missing position: fixed on body — Without fixing the body position, iOS allows the viewport to scroll behind overlays
- Scroll position lost on lock — Setting position: fixed resets scroll position to top; it's not restored when the modal closes
- Touch events not prevented — Touchmove events on the overlay backdrop propagate to the body
- Nested scrollable content — A scrollable area inside the modal (like a long form) conflicts with scroll prevention on the body
How to Fix It
- Use a battle-tested library — Install body-scroll-lock or use React's createPortal with scroll management from Radix UI or Headless UI
- Save and restore scroll position — Before locking, save window.scrollY. Set body to position: fixed; top: -scrollY. On unlock, restore scrollTo(0, scrollY)
- Handle iOS Safari specifically — Add -webkit-overflow-scrolling: touch to the modal content and prevent touchmove on the backdrop
- Use the dialog element — The native HTML dialog element with showModal() handles scroll locking correctly in modern browsers
- Test on real iOS devices — iOS Safari scroll behavior cannot be accurately tested in Chrome DevTools mobile simulation
Real developers can help you.
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.
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.
PawelPloszaj
I'm fronted developer with 10+ years of experience with big projects. I have small backend background too
BurnHavoc
Been around fixing other peoples code for 20 years.
Jen Jacobsen
I’m a Full-Stack Developer with over 10 years of experience building modern web and mobile applications. I enjoy working across the full product lifecycle — turning ideas into real, well-built products that are intuitive for users and scalable for businesses.
I particularly enjoy building mobile apps, modern web platforms, and solving complex technical problems in a way that keeps systems clean, reliable, and easy to maintain.
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.
Daniel Vázquez
Software Engineer with over 10 years of experience on Startups, Government, big tech industry & consulting.
Kingsley Omage
Fullstack software engineer passionate about AI Agents, blockchain, LLMs.
AUXLE
I am a Full Stack Developer experienced in building Websites, Web apps and Cross Platform Mobile Apps for Startups and Companies.
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.
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 doesn't overflow: hidden work on iOS Safari?
iOS Safari handles touch scroll events differently from desktop browsers. Setting overflow: hidden on the body doesn't prevent touch-initiated scrolling. You need to also set position: fixed and manage the scroll position manually.
What's the simplest cross-browser scroll lock solution?
Use the body-scroll-lock npm package or the native HTML dialog element with showModal(). Both handle cross-browser scroll locking including iOS Safari edge cases.