Padding-Right applied to body and causing visual shifting
DustinX opened this issue · 3 comments
Describe the bug
When the modal appears, things on the page shift left
To Reproduce
on <html> set overflow-y to scroll
Expected behavior
Things on page do not shift left when modal appears
Environment (please complete the following information)
- Operating System: Windows 10
- Browser, Version Chrome 83
- react-overlays Version 3.2.0
Additional context
The problem is caused by this section of code in ModalManagers.ts:
if (containerState.overflowing) {
// use computed style, here to get the real padding
// to add our scrollbar width
style.paddingRight = `${
parseInt(css(container, 'paddingRight') || '0', 10) + this.scrollbarSize
}px`;
}
If I comment that out then the problem goes away, and no other issues arise.
I'm guessing this code is trying to compensate for the scroll bar disappearing when the overflow on body is set to hidden. However, on my page, when the overflow on body is set to hidden, the scroll bar is still there, taking up space, but it is disabled. Because the scroll bar is forced to stay, since on <html> overflow-y is set to scroll.
This is meant to handle the standard case; if you're applying custom styling such that it's no longer relevant, I'd recommend using a custom ModalManager subclass that overrides the logic in a way that works for what you're trying to do.
I experience the same thing. Modal is applying overflow: hidden; padding-right: 15px;. Do you have a concrete example how to fix this issue?
@GuidovdRiet
Like Taion said, you could add a css rule that overrides the paddingRight rule set in ModalManagers.ts. There is no setting in the library that will fix the issue.