Disable smooth scrolling by default

[zbynek]

Prerequisites

• [X] I have searched for duplicate or closed feature requests
• [X] I have read the contributing guidelines

Proposal

Remove smooth scrolling introduced in https://github.com/twbs/bootstrap/pull/31877 by setting $enable-smooth-scroll to false by default (or removing completely).

Motivation and context

There were comments in the issue indicating this feature affects negatively several websites

https://github.com/twbs/bootstrap/pull/31877#issuecomment-746670156 https://github.com/twbs/bootstrap/pull/31877#issuecomment-1200475195

as well as external issues

https://github.com/hotwired/turbo-rails/issues/165 https://github.com/jenkins-infra/jenkins.io/issues/6009

The suggested workaround involves overriding this with !important, which is not a good practice.

[ffoodd]

Disabling a feature only because of SPA feels bad, since it's clearly a minority of sites on the web—and the fact that any SPA framework out there imply a build chain, making handling Sass custom build for Bootstrap pretty easy.

There are however several workarounds to mitigate this: using a custom property to toggle this for example, and maybe for V6 scoping this style with something like :has(:focus-visible).

[zbynek]

If smooth scrolling was objectively better, it would be the default browser behavior. Overriding that default is purely aesthetical choice and I'm not convinced Bootstrap should be opinionated about that.

Do people really like the animation after page load in Bootstrap 5 docs more than the instantaneous scroll in Bootstrap 4 docs?

[ffoodd]

Bootstrap is all about aesthetic choices (think colors or type scale), and a customisation layer thanks to Sass.

The fact is v5 is around for about 3 years, downloaded millions times, and there're only a few comments and this issue regarding smooth scroll.

We had dozens of issues asking for it, or reporting that it wasn't working (meaning it was expected).

Moreover there's a really simple way to disable it through Sass (which IMO should be the standard way to use Bootstrap for performance reasons).

And I came with a few suggestions to ease disabling it, discussions are still open. I understand the issue, and any other opinions and ideas are welcome.

[zbynek]

several workarounds to mitigate this: using a custom property to toggle this for example

do you mean Bootstrap would define a CSS property that users could override? Would it then be possible to override it without !important (since :root has higher specificity than html)?

[ffoodd]

Could be a way, indeed.

[anthony0030]

Fix for turbo & bootstrap that causes the page to scroll to the top before load. This works because aria-busy gets added to the html before the turbo starts to take you to the next page.

  html[aria-busy="true"] {
    scroll-behavior: auto !important;
  }

[davide93]

Removing the scroll-behavior also solves another problem.

If an input field with mandatory compilation is outside the viewport I encounter a problem on the validation of it. The page scrolls to the target but the message prompting to fill in the field is not shown.

If, on the other hand, the input field is visible in the viewport then the problem doesn't occur and works as expected.

outside-viewport-ko.webm expected.webm

[jifer]

@davide93 Is correct. There is bug reported since 2021 and exists in many browsers, including newest chrome.

https://issues.chromium.org/issues/40196176

We spent whole day trying to figure out why we doesn't have validation on our old forms. It was due to upgrading to newer BS which introduced smooth scrolling by default.

At least add information somewhere in documentation what are the risks of not switching that off.

[duarme]

The following custom setting solved the issue on our Rails app with Turbo:

  $enable-smooth-scroll: false;

[anthony0030]

@duarme, if you are adding that setting to your styling, I would recommend removing the default flag.