The anchor point of markdown file is incorrect after using vue component

[newives]

Describe the bug

The anchor point of markdown file is incorrect after using vue component

Reproduction

https://stackblitz.com/edit/vite-ntyrly?file=docs%2Fexample.md

Expected behavior

Anchor point correct

System Info

mac
Firefox

Additional context

Validations

• [X] Check if you're on the latest VitePress version.
• [X] Follow our Code of Conduct
• [X] Read the docs.
• [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.

[newives]

I'm sure this is a bug My updated demo

https://stackblitz.com/edit/vite-ntyrly?file=docs%2Ftest.vue

[Octobug]

I'm sure this is a bug My updated demo https://stackblitz.com/edit/vite-ntyrly?file=docs%2Ftest.vue

How do you get to the #powered-by-vite URL in this Image? Click on the outline item, click on the # in front of the "Powered by Vite", or access directly through a copied URL? @newives

[newives]

Click on Powered by Vite on the left and refresh the webpage to reproduce

[brc-dd]

Ah right, it's not maintaining position on reload. Doesn't seem to be happening on our docs site though 👀

[Octobug]

Click on Powered by Vite on the left and refresh the webpage to reproduce

Strange, I cannot reproduce the bug. Unless I

Click on Powered by Vite on the left, then scroll to somewhere else, and refresh the webpage: the scrollbar is automatically scrolled to somewhere else by the browser. (this is because of not setting history.scrollRestoration = 'manual')

[brc-dd]

Strange, I cannot reproduce the bug.

Seems to be only happening on firefox.

the scrollbar is automatically scrolled to somewhere else by the browser

This is expected behavior IMO. But this too doesn't work on firefox. In build, it's moving to the top, and in dev, it's just weird.

[newives]

The demo below does not locate the accurate anchor point in any browser.

https://stackblitz.com/edit/vite-fjgh8q?file=docs%2Fexample.md

[Octobug]

Strange, I cannot reproduce the bug.

Seems to be only happening on firefox.

Oh right. On Firefox it could reproduce.

[brc-dd]

The demo below does not locate the accurate anchor point in any browser.

That's just layout shift. You haven't added height/width or aspect ratio to that image - https://web.dev/articles/optimize-cls

Add that and it will work fine in Chromium/Safari.

[Octobug]

The demo below does not locate the accurate anchor point in any browser.

That's just layout shift. You haven't added height/width or aspect ration to that image - https://web.dev/articles/optimize-cls

Add that and it will work fine in Chromium/Safari.

I've read this part of the article Modern best practice for setting image dimensions. It looks a bit inconvenient for writing a markdown post with images...

Could it be done by postponing the execution of scrollTo(), something like:

window.onload = () => {
  scrollTo(...);
}

This should also solve the Firefox problem. The incorrect refresh scroll is done by firefox automatically. It seems that Chrome also does it before scrollTo(), so in Chrome it works fine.

But with window.onload it might be a problem for loading="lazy" images, When window.onload Triggers With Lazy Loaded Images

[brc-dd]

It looks a bit inconvenient for writing a markdown post with images

You can use some markdown-it plugin like https://github.com/boyum/markdown-it-image-size or https://github.com/ulfschneider/markdown-it-fitmedia though. There are also vite plugins out there that can optimize the images (create modern formats or blurhash like fallbacks).

[zhangyx1998]

The demo below does not locate the accurate anchor point in any browser.

That's just layout shift. You haven't added height/width or aspect ration to that image - https://web.dev/articles/optimize-cls Add that and it will work fine in Chromium/Safari.

I've read this part of the article Modern best practice for setting image dimensions. It looks a bit inconvenient for writing a markdown post with images...

Could it be done by postponing the execution of scrollTo(), something like:

window.onload = () => {
  scrollTo(...);
}

This should also solve the Firefox problem. The incorrect refresh scroll is done by firefox automatically. It seems that Chrome also does it before scrollTo(), so in Chrome it works fine.

But with window.onload it might be a problem for loading="lazy" images, When window.onload Triggers With Lazy Loaded Images

I think you need to take into account the scenario when user scrolls away before onload fires, otherwise the page will jump back even if user has already scrolled away.

That means you also need to listen for onscroll, and disable onload behavior upon user scroll.

[Octobug]

I think you need to take into account the scenario when user scrolls away before onload fires, otherwise the page will jump back even if user has already scrolled away.

That means you also need to listen for onscroll, and disable onload behavior upon user scroll.

Yeah, my thought was to postpone the execution of scrollTo(). But I wasn't sure in what way it could be done perfectly.

[svanimpe]

I had a similar issue. In my case, it was caused by a Vue component that added an <img> but that image didn't have a width and height specified. Adding those resolved the issue.