page's table of contents stops moving after diagrams.net vector graphics element is activated

[hellt]

Hi all, @squidfunk
I refrained from creating an issue since I don't know if that belongs to material-mkdocs or mkdocs in general.

For my vector diagrams provided on a doc site I use diagrams.net integration via iframes. The integration looks like that in the markdown

<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/hellt/drawio-js@main/embed2.js" async></script>

<div class="mxgraph" style="max-width:100%;border:1px solid transparent;margin:0 auto; display:block;" data-mxgraph="{&quot;page&quot;:3,&quot;zoom&quot;:1.5,&quot;highlight&quot;:&quot;#0000ff&quot;,&quot;nav&quot;:true,&quot;check-visible-state&quot;:true,&quot;resize&quot;:true,&quot;url&quot;:&quot;https://raw.githubusercontent.com/srl-labs/containerlab/diagrams/containerlab.drawio&quot;}"></div>

this makes it possible to source vector graphics from a remote location, and this renders to:

(live example)

On a page load it all works fine, and I see TOC following my scroll, but once I click on a div with graphics, it expands up as expected, but when I close it, the TOC element disappears as it moves all the way up to the top of a screen.

Here is a little animation showing that - https://gitlab.com/rdodin/pics/-/wikis/uploads/0c29b8fcb94ee5dde7182da2ab83d289/2022-05-18_14-53-01.mp4

[squidfunk]

Thanks for reporting. I'd suspect there to be some errors in the console, maybe you can take a look and check. It might be some interaction between Material and your custom integration. Note that we can't offer support for customizations, but if it turns out that the solution is an easy fix, we can surely integrate it. However, I'd kindly ask you to narrow it down as much as possible.

[hellt]

no errors in the console, unfortunately.
I am not a frontend dev myself, so can't figure out which property is responsible for a div to stop following the scroll...
It just appears to be once a diagrams.net HTML displays a diagram, the scrollable elements loose their stickiness and go back to the top of a page for whatever reason.

[squidfunk]

overflow: auto on body is causing the issue. I don't know if this is set by your diagram integration or extra JS though. If you remove it, everything should continue to work as expected.

[hellt]

thanks, I will bring this up with diagrams.net then, as this style property appears after I click on a diagram indeed