HTML and body "overflow" CSS rules conflict with sticky positioning and Bootstrap 5 modal padding/scrolling #2292
Description
Issue
The current default Nebula Parent CSS rules add overflow-x:hidden to the HTML tag and the body tag.
In order to behave as expected, items which use position:sticky can not have any parent element (parents, grandparents, etc.) with overflow: hidden overflow: scroll or overflow: auto. This unfortunately goes all the way up and includes the HTML and body tags.
This obviously causes an issue where any sticky positioned elements don't "stick"!
A simple test to isolate this is to add overriding CSS, which will restore sticky behavior:
html, body{
overflow-x:unset;
}
Bonus Bug
When using a Bootstrap 5 modal pop-up, BS adds 15px of padding to the right side of body, and also on the active .modal. It does this because BS removes the scrollbar from the window by adding overflow:hidden to the body as an inline-style. This stops content from shifting on removal of the scrollbar.
However, because an overflow property is set on the HTML tag (as overflow-x:hidden), the scrollbar still appears on the window. This is because overflow-y is automatically set to auto whenever X is specified, and vice-versa. The effect is that though the scrollbar is hidden on the body, it's added to the HTML.
With the scrollbar still visible, BS adds the 15px of padding and the result is a small issue where the modal isn't perfectly center aligned. The main issue though, is that the page can still be scrolled while a modal is open, because the scrollbar now being available on the HTML container.
This can also be tested by adding
html, body{
overflow-x:unset;
}
And seeing the effects.
Possible "Fix"?
To resolve this, I propose the overflow rules be removed from both the HTML and body tags. It will be up to the developer to wrap their overflowing content (if any) in a containing tag, and then set that container to be overflow:whatever-they-want.
This has the potential to cause visually breaking changes to sites which rely on the (currently Nebula CSS default) overflow properties to hide items overflowing the body.
Alternatively, you could add the CSS from above to the default child theme CSS. This way, old sites (using their own custom child theme's CSS) would not be effected, while new sites going forward would include this overriding rule:
html, body{ overflow-x:unset; }