Unexpected siteNav scrolling effect on small screens

[tlylt]

Tell us about your environment
Seen on markbind.org

• MarkBind Version:
  v3.1.1

What did you do? Please include the actual source code causing the issue.
Reproduce:

1. go to https://markbind.org/userGuide/formattingContents.html
2. reduce the width of the browser until siteNav collapse to an icon
3. click to open siteNav
4. scroll downwards

Some sort of delay/duplicate effect when scrolling.

• Suspected to be caused by the existence of pageNav, but that doesn't seem to be the case
• So far only the above page seems to be problematic

What did you expect to happen?
It should behave in the same manner as other pages, e.g. https://markbind.org/userGuide/authoringContents.html

What actually happened? Please include the actual, raw output.

[jonahtanjz]

Seems like there is a duplicate site-nav being "portaled" over.

[jonahtanjz]

Found a potential cause of the issue. If I remove tables.md from being included in the "Formatting content" page, the issue goes away. However, I don't see any issue with the tables.md file and https://markbind.org/userGuide/fullSyntaxReference.html seems fine as well, which also includes the tables.md file.

EDIT:
https://markbind.org/userGuide/fullSyntaxReference.html will also have the same issue if the include is not in a <panel>.

[ang-zeyu]

The offending snippet is here:

<span id="examples" class="d-none">

Animal | Trainable?| Price | Remarks
:----- | :-------: | ----: | ----
Ants   | no        | 5     |
Bees   | no        | 20    |
Cats|yes|100|
</span>

This is not valid html and causes hydration errors as <span>s should not contain "block" level elements like tables.

We could look through the docs for more of such cases as well, and correct them in one go.

[ang-zeyu]

More generally perhaps we could also start looking into warning the user of writing invalid html 🤔