Bug: scroll position changes when the button is dropdown

[delef]

• Operating system and version: macOS, 11.3
• Browser and version: Safari, 14.1

[anderlaw]

bro, you need to provide steps to reproduce this issue

[alpadev]

Someone of @twbs/css-review owes me a coffee!😏

Figured it might be something with our JS. It happens because of the button receiving focus which is done programmatically in our script. (Safari doesn't focus a button automatically when you click it.. go figure)

The click that closes it returns focus to the body again, because we focus it only when we call show(). So toggling the dropdown like this, will make the focus change back and forth between body and the dropdown button, as such the behaviour is repeating.

This only happens because the navbar is made sticky - with fixed it doesn't do that.

As a side note, I couldn't find any bug report about our page scrolling when you type something into the search. (Which happens for Chromium based, Firefox and Safari. Why I mention it? Because this is caused by the same thing..)

The reason for all this is https://github.com/twbs/bootstrap/blob/main/site/assets/scss/_content.scss#L6-L10

[ffoodd]

Does it only happen in Safari? I can't reproduce on either Firefox or Chromium on Ubuntu.

This looks like an odd browser bug, and since we don't use scroll-padding-top in Bootstrap itself I'd say that's not a big deal. Could try to find a workaround for Safari, but I probably won't take time to search for it :/

[ffoodd]

Ow and @alpadev up for the coffee ;)

[alpadev]

@ffoodd yeah the dropdown toggle scroll only happens in Safari.

Scrolling while typing into the search tho, happens for me on Chromium based and Firefox (nightly) on Windows, Safari on Mac.

The reason for this seems to be that scroll-padding will shrink what the spec calls optimal viewing region. If you enter text into inputs (or they receive focus) the default behaviour is to scroll inputs into view. This seems to respect this scroll-padding, so if the input is located in that scroll-padding area, the browser is trying to move it underneath by scrolling the page. At least that's how I understand it.

Edit: Looks like the scroll on input is going to be addressed for Chromium - https://bugs.chromium.org/p/chromium/issues/detail?id=1178622

[mdo]

Thinking the thing to do is to drop scroll-padding and restore the heading:target selectors with margin-top that we used to have. Thoughts?

[ffoodd]

Agreed, that's sad but I can't think of another workaround for now.