Diagrams are small and unreadable in IE 11 - since 0.5.1

[sifb]

Diagrams render small (~0.3x normal size) in IE 11 (x64, Windows 8 and Windows 2012r2). They render fine in Chrome.

Affects versions 0.6.0, 0.5.8, 0.5.4, 0.5.2, 0.5.1 (I didn't try the others).

They renders full size in 0.5.0.

This doesn't happen if I just have a local test.html file with one diagram in it, but it does happen if I have the diagram embedded in SharePoint, and the effect is possibly visible currently at http://mdp.tylingsoft.com/ - the sequence diagram renders smaller in IE than in Chrome.

See the second screenshot - the layout calculated height is stuck at 150px.
I'm not sure about this, but I think the way the element changes from width and height specified in px in version 0.5.0 to percent in 0.5.1 is what's causing this effect - if I edit the DOM and put the <svg width and height in pixels matching the viewport width and height, it redraws to a normal size (but has extra scrollbars).

[knsv]

There is a configuration setting that might help, useMaxWidth. With this set to true which is also default the diagram sets the width to 100% and lets the surrounding element decide how big the diagram will be. Turn it off and the size will be set to the rendering size if the diagram, I guess this corresponds to the old way of deciding the size. Another option to fix this is to set the size of the surroubding element in your css.

I hope this helps.

    <script>
        mermaid.initialize({
                sequenceDiagram:{
                    mirrorActors:true,
                    height:35,
                    topPadding:125,
                    useMaxWidth:false
                },
        });

[sifb]

Hi,

Yes that does help - thank you.

[havenqi]

unfortunately, I didn't work for me. I've used this solution already. Only IE11 is having very small diagram. Any idea?

[tylerlong]

I don't think we have the resource to fix issues for IE. For now we have to give up IE unless we have more contributors who want to work on it.