Pagination scrolling issue with CSS property `scroll-behavior` set on `:root`

[robhuska]

I have found an issue when changing pages on a long list when there is a CSS property of scroll-behavior: smooth set. For example in Bootstraps _rebbot.scss they set:

:root {
  @if $font-size-root != null {
    font-size: var(--#{$variable-prefix}root-font-size);
  }

  @if $enable-smooth-scroll {
    @media (prefers-reduced-motion: no-preference) {
      scroll-behavior: smooth;
    }
  }
}

This causes the page to jump to the top and scroll back to the bottom smoothly, but it is obviously not an ideal look. I have also made sure that overflow: hidden is set on the results container. Oddly enough it is worse when going to a higher page than when going to a lower page (gifs attached below). I have also notice that this is not an issue in Safari, only in Chrome and Firefox so far from my testing.

Page 1 to 2 scroll-behavior: smooth;

Page 2 to 1 scroll-behavior: smooth;

The fix I had to do was override that property with scroll-behavior: auto; in my own CSS.

Page 1 to 2 to 1 scroll-behavior: auto;

While doable, it was quite a headache to find, so hopefully something can be done within the plugin, especially since the Pagination plugin is a premium plugin.

Thanks for any other info or help here! Rob