HTML and body "overflow" CSS rules conflict with sticky positioning and Bootstrap 5 modal padding/scrolling

[patphg]

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; }

[chrisblakley]

Take a look at this comment in this issue: #1668 (comment)

I've been keeping an eye on this conversation, but it is still an open issue here, too: w3c/csswg-drafts#865

Open to thoughts, but my current suggestion is:

For Nebula sites, that'll mean overriding the body overflow and handling any horizontal scroll within the child theme.

[patphg]

That's what I'm doing for now. Is there anything native to the theme which relies on those overflow rules being set?

[chrisblakley]

Years ago there were some things dependent on it, but now I think it's just precautionary to prevent horizontal mobile scrolling at smaller sizes.

Definitely open to any thoughts/discoveries you have as you work through it.

[chrisblakley]

The overflow: clip; property value is now supported across all major browsers, so that could be something that helps here. If anyone experiments with it before I do please report your results!

https://caniuse.com/mdn-css_types_overflow_clip

@patphg