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.
Jaime Orts-Caroff
I'm a Senior Android developer, open to work in various fields
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.
Matt Butler
Software Engineer @ AWS
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
MFox
Full-stack professional senior engineer (15+years). Extensive experience in software development, qa, and IP networking.
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.
Kingsley Omage
Fullstack software engineer passionate about AI Agents, blockchain, LLMs.
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.
ISHANTDEEP SINGH
Senior Software Engineer with 7+ years of experience in React, JavaScript, TypeScript, Next.js, and Node.js. I’ve also worked as a tech lead for startups, owning end-to-end technical execution including architecture, development, scaling, and delivery. I bring a strong mix of hands-on coding, product thinking, and technical leadership, and I’m comfortable building products from scratch as well as improving and scaling existing systems.
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.