The header blocks the target mathematical equation after clicking on an equation reference

[searene]

Here is a sample markdown text for illustrating my point:

But how to prove that? We can use the following logic: Since `count` drops to 0 in the $k$-th iteration and the first number is $m$, we know that the number of $m$ in the first $k$ numbers is exactly $\frac{k}{2}$. To prove $m$ is also the majority in the remaining $n - k$ numbers, we need to prove

$$(c - \frac{k}{2}) \cdot 2 > n - k \label{1} \tag{1}$$

Which is equivalent to

$$2c - k > n - k$$

Which is equivalent to

$$2c > n$$

That is true by the definition of $m$. So we know that the equation $\eqref{1}$ holds. Following the previous logic, we know that it means the algorithm works when the first number is the majority.

The $\eqref{1}$ part is a link, when the user clicks on the link, the webpage should jump to the equation marked with \tag{1}. It works as expected, only that the target equation is at the top of the page, and the header is also at the top of the page, so the header blocks the target equation.

There is no such problem when clicking on markdown headers, it might have been fixed with issues like #158. Could this issue be solved in the same way?

I recorded a video to illustrate my point:

Screen.Recording.2023-07-21.at.08.52.17.mov

You can also find those texts on this webpage for testing.

Thanks in advance!

[reuixiy]

I have reproduced this in my Chrome browser.

But it shouldn't happen, the latest fix for #158 is

hugo-theme-meme/assets/scss/layout/_header.scss

Lines 75 to 78 in 9ccd079

	/* Scrolling fix for anchors being hidden below the header */
	*[id] {
	scroll-margin-top: var(--header-height);
	}

Using scroll-margin-top for all HTML elements have id attribute to fix the problem. As shown in the screenshot below, the <mjx-mtd> element also has id attribute, but this CSS rule doesn't apply!

Then I tested this in my Safari browser and it works normally. So I think this is a upstream browser bug which caused scroll-margin-top doesn't apply to custom HTML elements.

[searene]

@reuixiy Thanks for the reply! I actually ran the webpage in Edge, and it didn't work either. Maybe it's because Edge and Chrome are the same at the core. Considering that most upstream browsers usually take a long time to fix a bug, I don't expect this bug to be fixed by them soon. So maybe we can find a way to work around the problem in the meantime. For example, can we give the user an option to stop fixing the header at the top? It could be like the header in Hacker News, the header won't move along when the user scrolls up or down. It's just like other parts of the webpage, when the user scrolls away, it disappears. It has two advantages:

1. The header won't block the text anymore, because it's always appearing above any contents.
2. It can be taken as another style of the website, giving the user another option, even if the user is not bothered by the current issue.

Please kindly consider this suggestion :)

[reuixiy]

Yes you can customize it by yourself, simply adding

.header {
    position: relative;
}

.main {
    padding-top: 3em;
}

to your ~/blog/assets/scss/custom/_custom.scss file.

See https://github.com/reuixiy/hugo-theme-meme#customize-meme

[searene]

@reuixiy I just tried it, and it worked! Thanks for the solution!