Turbo + Bootstrap 5 Scrolls to Top on Redirect

[Petercopter]

This could be related to Turbo and not Turbo Rails, but I'm using Turbo Rails so I figured I'd start here.

Platform: MacOS Big Sur
Browser: Chrome, latest. Does not happen in Safari.

I've installed Bootstrap 5 Beta 3, with only the CSS. When you scroll down a page and click a link to redirect to another page, the new page attempts to replicate the scroll position of the previous page, and then there is a quick scroll to the top of the page.

There is no other JavaScript involved other than Turbo Rails, and this was not happening with Bootstrap 4, so I'm pretty baffled at this point. I have an isolated demo of the problem here:

https://github.com/Petercopter/turbo-rails-bootstrap-5

This seems like maybe it could be in the same neighborhood:
hotwired/turbo#201

Or possibly this: hotwired/turbo#63

[artero]

@Petercopter I had the same problem with Bootstrap 5 and turbo. This scroll is because Bootstrap 5 uses scroll-behavior smooth to navigate inside the page.

To disable the smooth scroll I added the next code in my CSS:

html {
  scroll-behavior: auto !important;
}

More info: https://getbootstrap.com/docs/5.0/getting-started/accessibility/#reduced-motion

[Petercopter]

@artero Thank you! I was barking up the wrong tree, obviously. I was digging around in the Turbo code, seeing there was scroll restore happening, and thinking that might be the problem. I didn't even think to check into what Bootstrap was doing that might not even be JavaScript related!

So your solution seems like a (workable) workaround, but I wonder whether there is an actual solution, and how and where that would be implemented. I'm going to check around for a bit.

Edit

body {
  scroll-behavior: auto;
}

Doesn't seem to be having any effect for me. I'm still seeing scroll to top on page change.

[artero]

Doesn't seem to be having any effect for me. I'm still seeing scroll to top on page change.

@Petercopter I updated my answer with a more correct code. I think the reason that your code doesn't work is that bootstrap defines a more specific rule

[Petercopter]

@artero specificity doesn't seem to be the problem, I'm seeing the same behavior with or without the !important. I'll keep digging.

Edit, sorry, I was on the wrong element. I should have been on html instead of body. So,

html {
  scroll-behavior: auto !important;
}

Does indeed work 👍