[Modal] Fix document scroll behind modal on iOS#48665
Open
olagokemills wants to merge 1 commit into
Open
Conversation
iOS Safari ignores `overflow: hidden` on the document scroll container for touch scrolling, so the page scrolls behind a modal once content overflows — most visibly when focusing an Autocomplete inside a Drawer opens the on-screen keyboard. On iOS, additionally pin the document scroll container with `position: fixed` (the robust scroll-lock technique) and restore the scroll position on unlock to avoid a jump to the top. Non-iOS platforms and custom (non-document) scroll containers keep the existing `overflow: hidden` behavior unchanged. Detection covers iPadOS 13+, which reports as `MacIntel` (distinguished from a real Mac via `maxTouchPoints`). Closes mui#46791
Deploy previewhttps://deploy-preview-48665--material-ui.netlify.app/ Bundle size
Check out the code infra dashboard for more information about this PR. |
mj12albert
reviewed
Jun 15, 2026
mj12albert
left a comment
mj12albert
left a comment
Member
There was a problem hiding this comment.
- The original issue repros for non-iOS as well so if this PR only fixes iOS, then it shouldn't be marked as
Fixes #46791 - It looks like scroll restoration ignores horizontal position
Author
Hi there, |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Partial fix for #46791
Problem
When an
Autocompleteis rendered inside a temporaryDrawer, focusing the input on mobile (iOS Safari, Android Chrome) causes the entire document to scroll instead of just the drawer/listbox.Root cause
A temporary
Draweris aModal, andModalManagerlocks page scrolling by settingoverflow: hiddenon the document scroll container. iOS Safari does not reliably honoroverflow: hiddenfor touch scrolling, so it only appears locked while nothing overflows. Focusing the Autocomplete opens the on-screen keyboard (shrinking the visual viewport) and the listbox — portaled todocument.body— gives the body scrollable overflow that iOS happily scrolls.Fix
On iOS, additionally pin the document scroll container with
position: fixed(the well-known robust scroll-lock technique) and restore the scroll position on unlock so the page doesn't jump to the top.overflow: hiddenbehavior unchanged (no desktop/Android-Chrome regression risk).MacInteland is distinguished from a real Mac vianavigator.maxTouchPoints.Testing
ModalManager.test.tscovering: body pinned + scroll restored on iPhone UA, iPadOS-as-Mac detection, non-iOS unchanged,disableScrollLockno-op, and non-document container untouched.ScreenRecording_06-12-2026.16-41-07_1.1.mp4