Setting CSS: overflow results in scroll not being reset on link navigation

[benjmo]

Description

When the CSS overflow: auto; height: 100% is applied to the html and body tags, it results in navigation via to not reset scroll position to the top. This has been raised before in other issues, for example in issue #7454 where several comments have mentioned the overflow problem.

Steps to reproduce

You can recreate this from gatsby-default-starter:

• Add global styles:

html,
body,
{
  height: 100%;
  overflow: auto;
}

• Add some filler content to page 1 and page 2 so that scrollbar shows up
• Scroll to bottom of page and click the link to go to the other page

Demo:
https://github.com/benjmo/gatsby-scroll-bug-demo

Expected result

Scroll is reset to top of page.

Actual result

Scroll position is unchanged.

Environment

  System:
    OS: Linux 5.7 Manjaro Linux
    CPU: (8) x64 Intel(R) Core(TM) i7-7700K CPU @ 4.20GHz
    Shell: 5.8 - /usr/bin/zsh
  Binaries:
    Node: 10.22.0 - ~/.nvm/versions/node/v10.22.0/bin/node
    Yarn: 1.22.4 - /usr/bin/yarn
    npm: 6.14.6 - ~/.nvm/versions/node/v10.22.0/bin/npm
  Languages:
    Python: 3.8.5 - /usr/bin/python
  Browsers:
    Firefox: 79.0
  npmPackages:
    gatsby: ^2.24.50 => 2.24.50 
    gatsby-image: ^2.4.16 => 2.4.16 
    gatsby-plugin-manifest: ^2.4.24 => 2.4.24 
    gatsby-plugin-offline: ^3.2.24 => 3.2.24 
    gatsby-plugin-react-helmet: ^3.3.10 => 3.3.10 
    gatsby-plugin-sharp: ^2.6.28 => 2.6.28 
    gatsby-source-filesystem: ^2.3.25 => 2.3.25 
    gatsby-transformer-sharp: ^2.5.13 => 2.5.13 
  npmGlobalPackages:
    gatsby-cli: 2.12.66

[benjmo]

Hmm, I did some further digging and it seems like this CSS:

html,
body,
{
  height: 100%;
  overflow: auto;
}

creates scrollTo problems even outside of Gatsby:
https://stackoverflow.com/questions/26388960/scrolltop-broken-body-height-100-overflow-auto

I managed to fix this by changing the CSS to 100vh instead of 100% on the html and body tags, as well as any necessary child elements, although I can't explain why this fixes it.

Apologies for the non-issue, but I based on what I've seen there has been a decent amount of confusion about this, so I'll leave it open for a while longer in case anyone wants to comment or clarify anything.

[pieh]

I'll close the issue as you discovered it doesn't seem strictly Gatsby related. It doesn't mean discussion should stop here, just that we need open issues to be actionable. We can still comment on close issue and issue will still be still searchable/discoverable.

I personally don't know inner working of browser in this area and how to explain why 100% vs 100vh result in such behaviours. I did find jensimmons/cssremedy#70 tho which might be good idea to try some snippets mentioned there that might account for different browser quirks (specifically iOS Safari)?