[gatsby-plugin-mdx] Code blocks on docs site are not pre-rendered

Description

Pasting https://www.gatsbyjs.org/contributing/docs-templates/#plugin-readme-template into Chrome, Firefox or Safari on Mac loads the correct page on the gatsbyjs.org website but the site doesn’t scroll to the correct location in the document.

I’ve checked the HTML in the dev tools and there is only one element on the page with that id and it is on the correct h element. There is also a right hand li that references this id and clicking it after the page loads does scroll the correct element into view - but, obviously, only after the page has fully loaded.

Steps to reproduce

1. Paste https://www.gatsbyjs.org/contributing/docs-templates/#plugin-readme-template into a browser
2. Observe the section titled ‘Plugin README template’ does not scroll into view
3. Click the right hand side menu item titled: ‘Plugin README template’ and observe the correct section does scroll into view.

Expected result

The correct element should scroll into place upon page load.

Actual result

An element earlier in the page flow scrolls l into place upon page load.

Environment

This is on the gatsbyjs.org website itself.

[ascorbic]

OK, I’ve worked out what the problem is here. It’s nothing to do with the navigation. It seems the codeblocks aren’t being pre-rendered on the server. The page loads initially (and scrolls to the correct spot), but as soon as the page-data is loaded and the page is hydrated, then the code blocks appear, changing the length of the page.

[ascorbic]

Hi @saschwarz . Could you check if this is still happening, because I can’t reproduce it. I’ve tried clickign that link in FF, Safari and Chrome and each takes me to the correct section