Anchor links are not resolving to the correct scroll position

[MarcelGeo]

Describe the bug

If Markdown contains images without explicit width and height, the browser cannot determine the image dimensions until they are loaded or retrieved from cache. Consequently, anchor links may point to the wrong position on the page, sometimes resulting in the target header being hidden or misaligned.

Related issue in Mergin Maps docs:

MerginMaps/docs#656

Reproduction

Open page with images
Save anchor link
clean image cache in a browser
open link in new tab

Expected behavior

anchor links works on pages with images.

System Info

System:
    OS: Linux 6.16 Pop!_OS 22.04 LTS
    CPU: (16) x64 12th Gen Intel(R) Core(TM) i7-1260P
    Memory: 5.61 GB / 31.05 GB
    Container: Yes
    Shell: 5.1.16 - /bin/bash
  Binaries:
    Node: 18.20.4 - /home/marcelkocisek/.nodenv/versions/18/bin/node
    Yarn: 1.22.22 - /usr/bin/yarn
    npm: 10.7.0 - /home/<>/.nodenv/versions/18/bin/npm
  Browsers:
    Firefox: 143.0.3
    Firefox Developer Edition: 143.0.3
  npmPackages:
    vitepress: ^1.6.3 => 1.6.3

Additional context

Is there any workaround or script to prevent mentioned behavior?

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]

Try the plugin mentioned here - #4853

https://web.dev/articles/optimize-cls

[MarcelGeo]

@brc-dd we tried to use this plugin. Width and height are properly there in images. Unexpected anchor position still exists after first visit of a page with images and anchor links. You can simulate it also with search -> click. We have custom css which is sizing the images:

img {
  max-width: 90%;
  max-height: 500px;
  width: auto;
  cursor: pointer;
  height: auto;
  aspect-ratio: attr(width) / attr(height);
  display: block;
}

Is here any magic in vue router or somwhere? It looks like this scrolling issue is just in chromium. Firefox / Safari is fine.

[brc-dd]

Can you share the link to your deployed site?

[MarcelGeo]

Can you share the link to your deployed site?

https://dev.merginmaps.com/docs/setup/install-mergin-maps-plugin-for-qgis/#plugin-configuration

[brc-dd]

Remove height, width and aspect-ratio from CSS. It should work 👀

[MarcelGeo]

Remove height, width and aspect-ratio from CSS. It should work 👀

let me redeploy

[MarcelGeo]

I tried to remove width: auto and height: auto. It looks like it worked.

But I need to use width: auto to prevent some non landscape images to be wider. That's why I need to use width: auto , e.g. here https://dev.merginmaps.com/docs/layer/numbers/.

[brc-dd]

I see. It's still not reserving space for some reason while loading. And it's happening only on Chromium-based browsers for some reason. Possibly related to https://issues.chromium.org/issues/40753240

Probably will need modifying the plugin a bit. Let me check locally.

[MarcelGeo]

I see. It's still not reserving space for some reason while loading. And it's happening only on Chromium-based browsers for some reason. Possibly related to https://issues.chromium.org/issues/40753240

Probably will need modifying the plugin a bit. Let me check locally.

You mean markdown-it plugin? Or just tweak it somehow using enhanceApp?

[brc-dd]

@MarcelGeo try this:

markdown: {
  config(md) {
    const maxHeight = 500 /* px */

    const img = md.renderer.rules.image!
    md.renderer.rules.image = function (tokens, idx, options, env, self) {
      const token = tokens[idx]

      const widthAttr = token.attrGet('width')
      const heightAttr = token.attrGet('height')

      let w = widthAttr ? Number.parseInt(widthAttr, 10) : null
      let h = heightAttr ? Number.parseInt(heightAttr, 10) : null

      let style = token.attrGet('style') || ''
      if (style && !style.trim().endsWith(';')) style += ';'

      if (w) {
        if (h && h > maxHeight) {
          w = Math.round(w * maxHeight / h)
          h = maxHeight
        }
        style += `width: ${w}px;`
      }

      token.attrSet('style', style)
      return img(tokens, idx, options, env, self)
    }

    markdownItImageSize(md, { publicDir: path.resolve(import.meta.dirname, '../public') })
  }
}

(order matters, register markdownItImageSize after custom renderer; install @types/node in your project)

---

In CSS, just keep this

img {
  /* max-width: 90%; if you want */
  cursor: pointer;
}

(remove other stuff)

---

It fixes "But I need to use width: auto to prevent some non landscape images to be wider." without needing width: auto.

In pages with youtube embeds it most likely will still break. Set aspect-ratio: 16 / 9 or something for lite-youtube. Though I think the one you're using is causing hydration issues. Ah nope, the hydration errors are because you haven't registered it properly:

// .vitepress/config

  vue: {
    template: {
      compilerOptions: {
        isCustomElement: (tag) => tag === 'lite-youtube'
      }
    }
  }

lite-youtube {
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 9;
  display: block;
}

[MarcelGeo]

Hey @brc-dd . Your fixes working like a charm. Need to test it now on multiple pages. I let you know It it's ok. But for now it works.

• youtube : I was fighting with that hydration error ... it is not there now

Probably time to implement this fixes to vite core directly.