markbind: Vue hydration issues caused by invalid HTML make page unscrollable after clicking on modal

Please confirm that you have searched existing issues in the repo

Yes, I have searched the existing issues

Any related issues?

#2008

Tell us about your environment

n/a

MarkBind version

4.0.1

What did you do? Describe the bug

–

Steps to reproduce

Go to https://nus-tic2002-ay2223s1.github.io/website/schedule/week5/topics.html#W5-5c Click on the following modal link:

Expected behavior

Page should work normally.

Actual behavior

The modal doesn’t have an X for closing, and the scrollbar of the parent page disappears even after closing the modal.

But no such problem in https://nus-cs2103-ay2223s1.github.io/website/schedule/week5/topics.html#implementation-refactoring-how

Anything else?

Both sites are slight variations of each other. The first is from the tic2002 branch while the latter is from the cs2103 branch of the same repo https://github.com/nus-cs2103/website-base That said, the rest of the content of the page is very different between the two sites as the two module follows different topic orders.

TODO

d.easy

make the docs more visible by linking it in the modal section, as this has happened quite often when using modals

d.moderate (explore and implement one or all of the solutions proposed: See https://github.com/MarkBind/markbind/issues/2025#issuecomment-1236055825

Check out how other vue-based tools like vuepress / nuxt does it
Implementing some simple rules ourselves (e.g. tables)
Bringing in some external binary to validate the outputs

About this issue

Original URL
State: closed
Created 2 years ago
Comments: 16 (15 by maintainers)

Most upvoted comments

I am facing the same issue at:

Thanks @yixiann for the bug report!

Hi @damithc, looks like it could be due to Vue hydration issues caused by invalid HTML. There were a few tables referenced in the problematic pages where the <table> does not contain a <tbody> (functionally, this is fine and doesn’t really do much, but for Vue it needs the HTML semantic to be correct), which seems to distort the functionality of the modal.

This is not a problem for other pages either because they don’t contain such tables, or they use tables that are generated from markdown (which we will handle the HTML generation).

The offending tables are e.g.: They are typically used for set code block side by side, like:

In SE book itself, I found 13 places of such issues (search for </table>), fixing them manually (by appending <tbody> and </tbody> within <table> and the modal starts to work as expected again.

tlylt on Sep 2, 2022