search

hotwired / turbo-rails

Use Turbo in your Ruby on Rails app
https://turbo.hotwired.dev
MIT License
2.07k stars 320 forks source link

Turbo + Bootstrap 5 Scrolls to Top on Redirect #165

Open Petercopter opened 3 years ago

Petercopter commented 3 years ago

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: https://github.com/hotwired/turbo/issues/201

Or possibly this: https://github.com/hotwired/turbo/pull/63

artero commented 3 years ago

@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 commented 3 years ago

@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 commented 3 years ago

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 commented 3 years ago

@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 👍