When there is too much content on the page, using #id may not allow you to locate the specific location.

[liuc688]

Describe the bug

In a page with a lot of content, it is sometimes impossible to locate a specific location using #id. This may be caused by positioning before the page has fully loaded. Especially when the project is just started, use search to find particularly late content on a certain page (which has a lot of content).

Reproduction

1. Start the project
2. Use search to search for the title or content at the end of a page (with more content)
3. Can locate the correct page, but cannot locate the content.

Expected behavior

After searching, you can locate the specific location on the specific page.

System Info

windows10,chrome120.0.6051.2

Additional context

No response

Validations

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

[brc-dd]

Do you have some form of repo where we can test this out?

[liuc688]

I figured out how this bug is triggered, that is, when multiple external images are introduced into the page, this problem will be triggered.

[brc-dd]

That's layout shift (https://web.dev/articles/optimize-cls). You'll need to either specify height/width to your images or set something like width: 100%; aspect-ratio: x/x; for each image. There are some vite plugins that already do this for you.

[mestela]

Sorry to keep bumping this discussion, but can you suggest a vite plugin to do this? I tried some (see further down in this thread), but I couldn't get them to work.

[liuc688]

thank you very much

[brc-dd]

Moving this to discussion, so if anyone has some cool solution they can share there. In future, we might also have a recommended/built-in way of handling images.

[mestela]

Sticking a +1 on this! Have ported a sprawling mediawiki site over to Vitepress, its incredible how fast it is, but I'm suffering a lot of this cumulative layout shift on long pages with lots of images. There's too many images to process by hand, so any pointers to a plugin would be much appreciated (a google search turned up a lot of helpful explainer articles, but no plugin links).

You can see it here for example: https://tokeru.com/cgwiki/HoudiniDops.html#rbd_follow_targets

Thanks!

[mestela]

Ah I read closer, 'vite plugin', not 'vitepress plugin'. Getting used to all this terminology!

I searched npmjs.com again and found vite-plugin-measure-media. I read a couple of tips in the vitepress docs and github discussions of how to get vite plugins to work with vitepress, so I put vite.config.mjs in my docs folder, with the example instructions from their site:

import { defineConfig } from 'vite';
import vitePluginMeasureMedia from 'vite-plugin-measure-media';
import ffprobe from '@ffprobe-binary/ffprobe';

export default defineConfig({
    plugins: [vitePluginMeasureMedia({ bin: ffprobe, })], // when using custom ffprobe binary
})

The build process goes without errors, but suspiciously fast. When I preview and inspect an image tag, I can see that the images don't have any width or height attribs.

Any clues? I assume I have to get the build command to also trigger the measure media plugin, but not sure how.