Diagram not rendering if it's in an unopened tab from sphinx-design's tab-set

[jkeneda]

I'm trying to write up some math notes for my students, and I'm encountering an issue where a Mermaid diagram isn't rendering correctly if it's in a secondary tab (i.e. if the tab containing it is not visible when the page loads).

I've got a minimal working example here, along with the initial sphinx (er, Jupyterbook) code for it.

I tried comparing the html for the correct render against the flawed one, and I see that the flawed render has several heights/widths set to zero. Maybe that could help with the diagnosis, but I don't know enough about either sphinx or this project to make further progress.

Thanks for reading (and for this project!), and let me know if you've got any ideas for solutions I could try!

[agagniere]

Hi,
I have the same issue...

There is a dirty workaround: when switching tab, refresh the page, it renders the diagram fine.

This behavior hints towards a lazy javascript rendering.
So I guess that forcing mermaid diagrams to be rendered to svg / png would be a workaround as well (setting mermaid_output_format in conf.py)