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
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.
Matthew Butler
Systems Development Engineer @ Amazon Web Services
BurnHavoc
Been around fixing other peoples code for 20 years.
legrab
I'll fill this later
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
Dor Yaloz
SW engineer with 6+ years of experience,
I worked with React/Node/Python
did projects with React+Capacitor.js for ios
Supabase expert
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.
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/
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.
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)
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 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.