Page not scrolling to top of the page in some cases only with scroll-behavior: smooth and on Firefox

Author: arturkasperekCreated Jun 23, 2020Updated Jun 20, 2021
Labelsbug

Describe the bug The bug occurs only on firefox and only when we add scroll-behavior: smooth in CSS. Also, the first-page height needs to be bigger than the height of the page which we navigate to. If we prepare that kind of setup we should notice that in the situation when the user is on the bottom of the page and tries to navigate to the second-page scroll to top of the page doesn't work.

Video where you can see issue https://www.loom.com/share/cfb7e03a05d24a89a29f0769d76762c0

I was searching if someone was reporting a similar issue in the past and I found out this issue: https://github.com/turbolinks/turbolinks/issues/547 Since the author didn't reproduce the issue with success I open this issue.

I try to play with build v5.2.0 code and find out that changing that:

r.prototype.scrollToPosition = function (t) {
          var e, r;
          return e = t.x, r = t.y, window.scrollTo(e, r)
        }

into

r.prototype.scrollToPosition = function (t) {
          var e, r;
          e = t.x; r = t.y;
          setTimeout(function() {
            window.scrollTo(e, r);
          });
        }

solved problem. But I guess it's not a solution which we want to have, it just shows that problem is related to a too fast invocation of scrollTo The issue is noticed in both v5.2.0 and the latest version of turbolinks.

To Reproduce I prepared github repo to reproduce issue https://github.com/arturkasperek/turbolink-issue-preview

  1. Open firefox
  2. Go to https://arturkasperek.github.io/turbolink-issue-preview/turbolinks-issue-5-2-0.html
  3. Scroll pretty far from the beginning of the page:
Zrzut ekranu 2020-06-23 o 15 37 38 4. Click on `LINK!` 5. Notice that the user is not scrolled to the top of the page: Zrzut ekranu 2020-06-23 o 15 43 40

Expected behavior The user after clicking on the link should jump to the top of the page with respect to scroll-behavior: smooth

Details (please complete the following information):