Gatsby Scroll Issues on Page Change/Link Click

[flikteoh]

Hi, I've tried searching for half a day and couldn't get a solution and I'm not sure if it is related to #24306 ?

Description

When clicking a link on front page with a list of posts after scrolling down for example, would result in the new content being scrolled down as much as previous page.

At first I have read many other posts and issues mentioning it was related to css / body height etc but could not find a solution to this.

I have setup Gatsby completely from scratch to reconfirm my problem is not related to css.

Things seems to work fine in development mode. This happens on production

Steps to reproduce

1. Scroll to bottom of post listing page
2. Click any links
3. Notice the next loaded page is scrolled to the bottom like previous page

>>> Minimal Reproduction

Expected result

After scrolling down from index page, the link click should load a new page, with the view at top.

Actual result

New page is loaded at the scrolled location of previous page

Environment

  System:
    OS: macOS 10.15.5
    CPU: (8) x64 Intel(R) Core(TM) i7-6820HQ CPU @ 2.70GHz
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 12.17.0 - ~/.nvm/versions/node/v12.17.0/bin/node
    npm: 6.14.5 - ~/.nvm/versions/node/v12.17.0/bin/npm
  Languages:
    Python: 2.7.16 - /usr/bin/python
  Browsers:
    Chrome: 83.0.4103.116
    Safari: 13.1.1
  npmPackages:
    gatsby: ^2.23.20 => 2.23.20 
    gatsby-image: ^2.4.12 => 2.4.12 
    gatsby-plugin-mdx: ^1.2.22 => 1.2.22 
    gatsby-plugin-preact: ^4.0.8 => 4.0.8 
    gatsby-plugin-react-helmet: ^3.3.9 => 3.3.9 
    gatsby-plugin-styled-components: ^3.3.9 => 3.3.9 
    gatsby-source-filesystem: ^2.3.18 => 2.3.18 
  npmGlobalPackages:
    gatsby-cli: 2.12.58

[flikteoh]

Noticing the behavior to happen to internal links that are not created via Gatsby Link, ie: a markdown/mdx link or regular tags.

The new scroll states were not created when changing a page, initial scroll state were updated instead.

Is this the intended behavior?

Note: Using gatsby-plugin-catch-links does fix my problem with markdown links.

[flikteoh]

Update:

Using Gatsby Link also causes the next page click not to update page template.
When switching between index page to a post via Link component, the post template was not applied.

[josephmarkus]

Got the same issue here as well

[vladar]

Could be also related: #25554

[josephmarkus]

It appears that this bug has been introduced here - #24306 and released in 2.23.6 (2020-06-19) (see https://github.com/gatsbyjs/gatsby/compare/[email protected]@2.23.6).

I tried downgrading to 2.23.5, but this didn't help, which makes me think that my identified source of error isn't the culprit.

I tried downgrading to other lower versions, but ran into various issues (I reported them here - #25607)

If you are like me and you have [email protected] or similar and you just want to upgrade to most recent version without aforementioned issues, then the following will work for you:

1. Add resolutions entry to your package.json:

"resolutions": {
    "**/gatsby-cli": "2.12.55",
    "**/xstate": "4.10.0"
},

NOTE: this above syntax (**/package-name) means that these packages are dependencies of another package. In this case gatsby-cli is a dependency of gatsby package (see this - https://classic.yarnpkg.com/en/docs/selective-version-resolutions/). Also, make sure that your version doesn't have ^ at the start, otherwise it will download a version that is newer than the one specified.

2. Bump gatsby to 2.20.26 through yarn upgrade [email protected].

And that's it. gatsby develop worked well, as well as gatsby build && gatsby serve worked fine

You can find a bit more detail on this here - #25478 (comment)

[surreum]

The same issue after migration from v3 to v4 Gatsby. Can someone give an advice how to fix it or should I better stay on v3 version?

[andriuszibaitis]

This is solution:

Put this code to your gatsby-browser:

export const shouldUpdateScroll = ({ routerProps: { location }, getSavedScrollPosition }) => {
const currentPosition = getSavedScrollPosition(location);
setTimeout(() => {
window.scrollTo(...(currentPosition || [0, 0]));
}, 0);
return false;
};

That's it.