vitepress
vitepress copied to clipboard
vuejs
The anchor point of markdown file is incorrect after using vue component
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.
https://stackblitz.com/edit/vite-ntyrly?file=docs%2Ftest.vue
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
Ah right, it's not maintaining position on reload. Doesn't seem to be happening on our docs site though 👀
Click on
Powered by Viteon 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')
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.
The demo below does not locate the accurate anchor point in any browser.
https://stackblitz.com/edit/vite-fjgh8q?file=docs%2Fexample.md
Strange, I cannot reproduce the bug.
Seems to be only happening on firefox.
Oh right. On Firefox it could reproduce.
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.
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
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).
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.onloadit might be a problem forloading="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.
I think you need to take into account the scenario when user scrolls away before
onloadfires, otherwise the page will jump back even if user has already scrolled away.That means you also need to listen for
onscroll, and disableonloadbehavior 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.
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.
