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
Background scrolls behind modal on iPhonePage jumps to top when modal opensScroll position lost after closing dialogCannot 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

  1. Use a battle-tested library — Install body-scroll-lock or use React's createPortal with scroll management from Radix UI or Headless UI
  2. Save and restore scroll position — Before locking, save window.scrollY. Set body to position: fixed; top: -scrollY. On unlock, restore scrollTo(0, scrollY)
  3. Handle iOS Safari specifically — Add -webkit-overflow-scrolling: touch to the modal content and prevent touchmove on the backdrop
  4. Use the dialog element — The native HTML dialog element with showModal() handles scroll locking correctly in modern browsers
  5. Test on real iOS devices — iOS Safari scroll behavior cannot be accurately tested in Chrome DevTools mobile simulation

Real developers can help you.

Mehdi Ben Haddou Mehdi Ben Haddou - Founder of Chessigma (1M+ users) & many small projects - ex Founding Engineer @Uplane (YC F25) - ex Software Engineer @Amazon and @Booking.com Jacek Rozanski Jacek Rozanski Senior PHP/Symfony developer and DevOps engineer with 20+ years of professional experience, running opcode.pl (web development agency, est. 2004). Day job: I'm the sole backend developer at merketing company where I own and maintain 11 PHP/Symfony microservices on AWS (ECS Fargate, RDS, S3, CloudFront), handle the full CI/CD pipeline (Bitbucket Pipelines, Docker), and manage monitoring with Sentry and CloudWatch. These services handle high request volumes in production every month. What I bring to AI-built apps: - I audit and fix security issues (OWASP methodology), performance bottlenecks, and architectural problems in codebases generated by Cursor, Claude Code, Lovable, Bolt, and v0 - I refactor AI-generated prototypes into production-grade applications with proper error handling, testing, and clean architecture (SOLID, DDD, hexagonal architecture) - I set up the infrastructure AI tools don't touch: AWS hosting, CI/CD pipelines, automated deployments, database optimization, monitoring, and alerting - I integrate external services: payment providers, email systems, partner APIs, SSO/auth Tech stack: PHP 8.x, Symfony, React, Next.js, PostgreSQL, MySQL, Docker, AWS (ECS, RDS, S3, SQS/SNS, CloudFront), Terraform, Supabase. I also use AI tools daily (Claude Code, Cursor) in my own workflow, so I understand both the strengths and the gaps in AI-generated code. Based in Poland (CET timezone). Available for async work and calls during EU/US business hours. legrab legrab I'll fill this later hanson1014 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. Rudra Bhikadiya Rudra Bhikadiya I build and fix web apps across Next.js, Node.js, and DBs. Comfortable jumping into messy code, broken APIs, and mysterious bugs. If your project works in theory but not in reality, I help close that gap. Meïr Ankri 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. zipking 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. Victor Denisov Victor Denisov Developer Bastien Labelle Bastien Labelle Full stack dev w/ 20+ years of experience rayush33 rayush33 JavaScript (React.js, React Native, Node.js) Developer with demonstrated industry experience of 4+ years, actively looking for opportunities to hone my skills as well as help small-scale business owners with solutions to technical problems

You don't need to be technical. Just describe what's wrong and a verified developer will handle the rest.

Get Help

Frequently 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.

Related Claude Code Issues

Can't fix it yourself?
Real developers can help.

You don't need to be technical. Just describe what's wrong and a verified developer will handle the rest.

Get Help