Incomprehensible link behavior for the same exact html code [display:none vs visibility:collapse]

support
1

There is something really weird with my website, the links in the TableOfContent don’t work.
Sometimes.
But when the screen dimensions go beyond a certain threshold, a media query kicks in and change the layout: fine. there are buttons to make the menu or toc appears, and the menu (all local links but not to the current page) works as intended.
But when I access the toc this way, and click on one of its link, the URL in the URL bar changes, but the page doesn’t actually change at all, I am not sent to the headings (specific id attributes) within the page.
But I verified the href attributes of those toc heading links in either case - normal and small screen layouts - and they indeed are the same, so it boggles my mind !
Same thing with firefox or chromium.

I doubt it’s hugo’s doing since the html code won’t possibly change with a media query or whatnot, but knowing hugo you’ll build the sample repository more easily than people of other forums.
Thanks for your help, so we know if it’s really a bug or I misssed something obvious, as usual.
https://drive.google.com/drive/folders/1_CQasJ8S3mizW50EFhlwctn-9Un5vO3m?usp=share_link

2

This looks like Theme that you using and way how the mobile ToC menu is designed is not interacting with website DOM element (rest of the page).

Try different theme to see if you got same issue.

3

The theme, I mostly wrote it myself by this point. Only one or two js scripts I borrowed.
But everything has been working so far, for months.

normal

<nav class="TableOfContents">
  <ol>
    <li><a href="#sdfds">sdfds</a>
      <ol>
        <li><a href="#sdfsdfsd">sdfsdfsd</a></li>
        <li><a href="#bb">bb</a></li>
      </ol>
    </li>
    <li><a href="#sdfsdsfds">sdfsdsfds</a></li>
  </ol>
</nav>

small screen

<nav class="TableOfContents">
  <ol>
    <li><a href="#sdfds">sdfds</a>
      <ol>
        <li><a href="#sdfsdfsd">sdfsdfsd</a></li>
        <li><a href="#bb">bb</a></li>
      </ol>
    </li>
    <li><a href="#sdfsdsfds">sdfsdsfds</a></li>
  </ol>
</nav>

Same. Exact. Code. Explain how the way a menu is designed can interfere with normal interaction with html elements, because it sounds like magic to me.

4

This is a part of _structure.scss that you need to look at, as this do not interact with a DOM.

@media screen and (max-width: $mobile-breakpoint) {
	#show-toc:checked ~ #container {
		@include show_toc_container_config}
	#show-menu:checked ~ #container {
		@include show_menu_container_config}
	:where(#show-menu,#show-toc):not(:checked) ~ #container {
		@include small_container_config}
		div#container>nav {background-color:black}
		main {background:black}
		#book-title {background-color:rgba(black,.8)}
	  	.hint {margin:0;padding: 0 1vw;}
		.intro article {margin-top: $mobile-height-header }
 }

When it open, it opens over the content and not interacting with the content.

I am not an expert in SCSS but this is where you need to look.

and that bit

@mixin show_toc_container_config {
 		position: relative;
 		#book-toc {
 		display:block;
 		position:absolute;
 		margin: 0 auto;
		@include show_common_config}
	&>:not(#book-toc) {display:none}
}

especially

&>:not(#book-toc) {display:none}

Whenb you click on ToC menu, the menu shall close ind interact with DOM to point to right header, but its not doing it.

5

ah, so you mean that the link can’t resolve because the parts of the dom tree they refer to (the <article>) is set on “diplay:none” ?
Ok, I could understand that. But it worked before so I still don’t get it.
And that doesn’t explain why once I went back on the article, hence <article>'s display is normal and the dom part still visible, the URL doesn’t work immediately.

It doesn’t look like a normal behavior, no matter the explanation…

6

Yes, it doesn’t.

The mobile menu for ToC not longer interact with main part of the site.

This may related to duplicate IDs. Maybe normal ToC uses same ID as mobile menu ToC. Try making them unique and see if that will work.

7

But they’re actually the same dom/html element, just the css layout change, the code doesn’t.
I changed display: none to visibility:collapse and it works !

Of course, it’s logical, with the first property the elements don’t exist anymore. What I needed is to interact with something I do not see but exist, not make elements appear after an interaction like I usually do.

Well I learnt stuff, cool, very interesting, thanks !

1 Like
8

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.