[modal][dialog] Fix scrollbar compensation in Shadow DOM#48826
[modal][dialog] Fix scrollbar compensation in Shadow DOM#48826ZeeshanTamboli wants to merge 5 commits into
Conversation
ZeeshanTamboli
added
type: bug
Deploy previewBundle size
Check out the code infra dashboard for more information about this PR. |
ZeeshanTamboli
changed the title
There was a problem hiding this comment.
Pull request overview
This PR addresses scrollbar “jumping” when Dialog/Modal is rendered from within a Shadow DOM by ensuring scrollbar-width compensation (padding-right) is applied to the element that is actually scroll-locked (e.g. document.body in Shadow DOM cases).
Changes:
- Refactors
handleContainer()to computescrollContainerearlier and apply scrollbar compensation (padding-right) toscrollContainerinstead of the originalcontainer. - Updates the Shadow DOM test to assert
padding-rightcompensation is applied todocument.body(and not the Shadow DOM container).
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
| packages/mui-material/src/Modal/ModalManager.ts | Applies scrollbar compensation to the computed scrollContainer, including Shadow DOM scenarios. |
| packages/mui-material/src/Modal/ModalManager.test.ts | Strengthens Shadow DOM assertions around body scroll-locking and padding compensation. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| : container; | ||
| } | ||
|
|
||
| if (isOverflowing(scrollContainer)) { |
There was a problem hiding this comment.
Makes sense. But applied a different suggestion f722940. A clearer fix would be to make isOverflowing() understand both viewport elements.
The Copilot's suggestion above is slightly confusing because it checks body even though documentElement (<html> element) is the element being locked.
|
Do I need some special setup to repro the issue? On my macos chrome, the scrollbar the does not even show when I'm not scrolling, and when it does show, there's no jumping. Screen.Recording.2026-07-21.at.10.34.27.mov |
I am not sure why. Did you try the sandbox preview in full screen? |
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com> Signed-off-by: Zeeshan Tamboli <zeeshan.tamboli@gmail.com>
@silviuaavram Can you try this: On macOS, Chrome hides the scrollbar when you aren't scrolling because of the system's "overlay scrollbar" design. To make it permanently visible, open the Apple Menu > System Settings > Appearance, and change the Show scroll bars setting to |
Fixes #39636
Fixes scrollbar compensation for modals rendered inside a Shadow DOM by applying
padding-rightto the element being scroll-locked (in this case alwaysdocument.body). This prevents the page from shifting when the dialog opens inside Shadow DOM.Before: https://stackblitz.com/edit/github-hnga8rq5?file=src%2FApp.tsx
After: https://stackblitz.com/edit/8k4rqjn2-cs8zgf7u