You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
Repository navigation
Bug: scroll position changes when the button is dropdown #33993
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..)
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 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.
Activity
anderlaw commentedon May 16, 2021
bro, you need to provide steps to reproduce this issue
alpadev commentedon May 16, 2021
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- withfixedit 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 commentedon May 17, 2021
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-topin 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 commentedon May 17, 2021
Ow and @alpadev up for the coffee ;)
alpadev commentedon May 17, 2021
@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-paddingwill 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 thisscroll-padding, so if the input is located in thatscroll-paddingarea, 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 commentedon Feb 23, 2022
Thinking the thing to do is to drop
scroll-paddingand restore theheading:targetselectors withmargin-topthat we used to have. Thoughts?Fix #33993 by removing scroll-padding-top for some :target trickery
ffoodd commentedon Feb 23, 2022
Agreed, that's sad but I can't think of another workaround for now.
Fix #33993 by removing scroll-padding-top for some :target trickery