Rendered mermaid graphs mess up anchor positions of subsequent content

[lukastaegert]

Not sure if this is an issue of the way the plugin works or of mermaid graphs in general, but I have an issue that in certain situations, the size of mermaid graphs is not taken into account when jumping to anchors below these graphs.

For example take this link: https://rollupjs.org/plugin-development/#renderdynamicimport

It should directly jump to the corresponding section in the Rollup docs, but very often, it ends up quite a bit further up on the page. The offset roughly corresponds to the size of two large mermaid graphs embedded in the page further up here and here.

The problem does not occur when navigating within the page but only when either directly opening such a link in a new tab or navigating from a different page. Also, links above the graphs work correctly like this one https://rollupjs.org/plugin-development/#build-hooks.

There also seem to be subtle differences between browsers, e.g. for me Chrome sometimes worked while Safari seemed reliably broken. Not sure if there is anything that can be done from plugin side and I admit, I did not do any deeper debugging yet. Maybe others noticed the issue as well and have some deeper insights?

Page source is here https://github.com/rollup/rollup/blob/master/docs/plugin-development/index.md

[emersonbottero]

Hi @lukastaegert can you try the last version of mermaid and vitepress?
the links above are working for me but you probably change your code.

[lukastaegert]

In the meantime I actually converted to pre-compiling the page with mermaid CLI and no longer use the plugin. This has the advantage that I do not need mermaid in my runtime, but may not be a solution for everyone.

[lukastaegert]

Thanks for taking the time to look into this, though.