In-page anchors do not work on first page load

[CGamesPlay]

Hello! Apologies if this has been reported elsewhere, I scanned the recent open/closed issues and didn't spot anything.

Steps to reproduce:

1. Open https://reactjs.org/docs/react-component.html
2. Click on the first link reading render().

Expected behavior: page has scrolled so that the documentation for render is visible.
Actual behavior: most of the time, nothing happens.

Sometimes a second, third, or tenth click will make it work, and sometimes the first click does correctly scroll. I encounter this (from googling the name of a lifecycle method, for instance) frequently enough that it's becoming a hassle to use the React docs. This affects all pages, including the blog.

Using Chrome Version 85.0.4183.102 (Official Build) (64-bit). I'm unable to reproduce the problem in Safari.

[eps1lon]

I can't reproduce this. Does this reproduce for you with a blank user profile or incognito window? Might be that some settings or extensions interfere.

[CGamesPlay]

I can confirm in an incognito window and verified that no extensions were loaded. I encountered some very strange behavior while I was poking at it. I received a verbose-level warning about the requestAnimationFrame handler, and I could often see the page jumping around by a pixel or two before failing to scroll to my intended results. My guess is that there is some smooth-scrolling library installed which is causing the issue?

I've attached a web profile with screenshots, you can see how CPU usage spikes each time I click, but the page doesn't scroll. If you haven't used one of these files before, just open any web chrome web inspector, performance tab, and click the upload button on the unzipped file.

Profile-20200915T171851.json.zip

[eps1lon]

These are likely unrelated.

Though I can reproduce it now but only after landing on a page with a restored scroll position. This happens either if you land on the page with a fragment link e.g. https://reactjs.org/docs/react-component.html#shouldcomponentupdate or scroll a bit and then reload the page. In both cases in-page fragment links don't work.

[CGamesPlay]

Interesting. It definitely does reproduce for me with my original steps but I can confirm I'm seeing the fragment link behavior you are describing, so it's likely the root cause of my issue as well. Your repro steps are still sporadic for me, though, FWIW.

Thanks for investigating!

[eps1lon]

Looks like it's an issue with gatsby: gatsbyjs/gatsby#25778

[SampsonCrowley]

Every single "hash" (#) link is broken for me on desktop chrome. It's been this way for a while across multiple browsers. If I want to actually go to a linked section on the page I have to open the link in a new tab. otherwise, even a (normal) page refresh just jumps back to previous scroll position instead of the clicked link's content