In README on project homepage, links to anchors don't land on the anchor

Everyone can contribute. Help move this issue forward while earning points, leveling up and collecting rewards.

Summary

Hey there!

I have a rather long README file for my One-Pager Chords project (still work in progress, both the README and the project) and I’ve been experiencing issues with links to anchors. But only when viewing the README from the homepage of the project, i.e. when opening it from the project’s file browser or from a specific revision, the bug won’t occur.

Basically, when clicking on a link in the TOC (as well as the links scattered around the document), the browser will jump somewhere in the page, not super far from the anchor but definitely far enough (e.g. seems to vary a lot but up to a few screens up or down) that it’s not the expected behavior. This is particularly visible when clicking on links in the middle of the TOC.

And to be clear, clicking on these same links in the latest version of the file (or any old one for that matter) will work fine, i.e. the browser will land precisely on the anchor. Which means this is not a problem with the links.

I initially suspected it might be caused by the lazy loading of pictures since there are a few screenshots in the README. But it seems that when opening the README from the browser, it also uses lazy loading and the anchors work as expected. So probably unrelated.

By the way, while playing around with this issue, I noticed that, after clicking on an link to an anchor, the browser’s back button behavior is not working as expected. Indeed, instead of scrolling back to the link that was clicked on, it more or less stays in place. I don’t know if this is related. Let me know if I should eventually create a separate bug report for that issue.

PS: I initially reported this issue on the forum and @dnsmichi suggested I should report it here 😇

Steps to reproduce

  1. Open the project homepage
  2. Scroll to the table of contents
  3. Click on any link –the bug is quite visible with the links in the middle of the ToC but it basically happens with any of the links
  4. Notice that you didn’t land anywhere near the corresponding section
  5. Try again with a few more links

Now, check how it works fine when accessing the same version of the README from the file browser:

  1. Scroll back to the top of the project’s homepage
  2. In the list of source files, click on the README file
  3. It opens the latest version of the README in a new page
  4. Scroll to the table of contents
  5. Click on any link
  6. Notice how it works perfectly fine

Example Project

Check out One-Pager Chords!

What is the current bug behavior?

When clicking on an anchor link, the browser jumps too far away from the anchor.

What is the expected correct behavior?

It should jump straight on the anchor, like it does when the README is open from the file browser.

Relevant logs and/or screenshots

Here’s a video of the bug. Notice I click on the link Several lines of lyrics might be on the same line and land pretty far away of the corresponding section:

README_homepage.mp4

Now I open the README from the file browser, click on the same link and land right on the spot:

README_latest.mp4

Output of checks

This bug happens on GitLab.com

Edited by 🤖 GitLab Bot 🤖