Footnotes not working

[karasugawasu]

Requirements

• [X] This is a bug report, and if not, please post to https://lemmy.ml/c/lemmy_support instead.
• [X] Please check to see if this issue already exists.
• [X] It's a single bug. Do not report multiple bugs in one issue.
• [X] It's a frontend issue, not a backend issue; Otherwise please create an issue on the backend repo instead.

Summary

Footnotes do not work in Markdown from 0.18.0.

The HTML is correct, but clicking on the link only reloads the page and does not take you to the footnote of that one.

Steps to Reproduce

1. Creating a footnoted post
2. Click on footnotes
3. Page reloads and does not jump to footnotes.

Technical Details

Windows11、Chrome 114.0.5735.134

Lemmy Instance Version

0.18.0

Lemmy Instance URL

No response

[chaorace]

I'm also experiencing this bug on version 0.18.2. (example comment).

Interestingly, the internal footnote anchor IDs work as expected if you load the page from scratch (click me). The issue only seems to happen when browsing at a comment permalink and then clicking a footnote hyperlink -- doing this causes the browser to navigate to the expected URL w/ anchor but fails to actually scroll to the anchor.

[karasugawasu]

I couldn't fix it myself, so I temporarily added code to the custom html header to take care of it. I'll put it here for your reference.

      LEMMY_UI_CUSTOM_HTML_HEADER: >
            <script>
              window.addEventListener('click', e => {
                const link = e.target.getAttribute('href');
                if (/^#/.test(link)) {
                  e.preventDefault();
                  escapeLink = "#" + CSS.escape(link.slice(1))
                  const toTarget = document.querySelector(escapeLink);
                  if (toTarget) {
                    if (toTarget.scrollIntoView) {
                      toTarget.scrollIntoView({ behavior: "smooth", block: "start", inline: "nearest" });
                    } else {
                      let rect = toTarget.getBoundingClientRect();
                      window.scrollTo(rect.x, rect.y)
                    }
                  }
                }
              });
            </script>