Text in mermaid diagrams overflows in Firefox

[OlgaKartasheva]

Contribution guidelines

• I've read the contribution guidelines and wholeheartedly agree

I've found a bug and checked that ...

• ... the problem doesn't occur with the mkdocs or readthedocs themes
• ... the problem persists when all overrides are removed, i.e. custom_dir, extra_javascript and extra_css
• ... the documentation does not mention anything about my problem
• ... there are no open or closed issues that are related to my problem

Description

I'm using mermaid sequence diagrams and seeing some issues on Firefox vs Chrome:

1. text does not fit inside the notes block
2. text (inscriptions on the arrows, messages) is not strictly above the arrows, but slides down on them

Expected behaviour

The text is displayed in the same way as in Google Chrome in any browser:

1. text fits inside the notes, loops and other blocks
2. text (inscriptions on the arrows, messages) is strictly above the arrows

Actual behaviour

on Firefox vs Chrome:

1. text does not fit inside the notes, loops and other blocks
2. text (inscriptions on the arrows, messages) is not strictly above the arrows, but slides down on them

Steps to reproduce

This can be reproduced on the main docs (just open it in Firefox but not Chrome): https://squidfunk.github.io/mkdocs-material/reference/diagrams/#using-sequence-diagrams

In this example the note is small but if it will be bigger than it would not fits inside the block

Package versions

This can be replicated on the main docs

Configuration

This can be replicated on the main docs

System information

MacOS 12.2.1 (21D62) Monterey

• Firefox 102.0.1 (64-bit) - issue present
• Chrome 104.0.5112.101 (Official Build) (x86_64) - no issue
• Safari 15.3 (17612.4.9.1.8) - no issue

[facelessuser]

I can reproduce the issue to some degree using Firefox when viewing the example in Mkdocs Material's official page.

With that said, I do not experience this issue with my own personal implementation of Mermaid when viewing the same diagram in Firefox.

I'm not exactly sure if this is related to MkDocs scaling the images and my documentation not scaling them or some other option. But, what I am certain of, is that this overflowing of text content can be avoided as I've not had this issue.

I haven't dug into Materials default options for Mermaid, but I'd be curious as to how it differs from what I'm doing.

[squidfunk]

Thanks for reporting. I can reproduce the problem when viewing the diagram with Firefox, but I can't locate the problem. It should be fixable since @facelessuser has it working, but I'm not sure how. Maybe somebody else has a good idea. The Mermaid.js code is very simple and located here.

Even when I remove all custom styles, the issue persists. Maybe it has something to do with the fact that we load Mermaid.js on demand and use a slightly unorthodox method of initialization.

[squidfunk]

Good news, I think I found the problem. The sequence diagram computes positioning and offsets based on font sizes. 60ea10a sets the font sizes to the ones we use, fixing the issue. Yet, it is super weird that this is only happening in Firefox.

[squidfunk]

Released as part of 8.5.4.

[facelessuser]

Yep, that turned out to be the exact fix I had done in my code, which I see is now why I did not have the same issue.

Apparently, I had even documented it:

      sequence: {
        useMaxWidth: false,
        // Mermaid handles Firefox a little different.
        // For some reason, it doesn't attach font sizes to the labels in Firefox.
        // If we specify the documented defaults, font sizes are written to the labels in Firefox.
        noteFontWeight: "14px",
        actorFontSize: "14px",
        messageFontSize: "16px"
      },

[squidfunk]

I didn't mention, but yes, I've looked up your solution and adapted it 😅 For us, the configuration is slightly different because we use different font sizes. It's so unfortunate that Mermaid.js is so inconsistent that this is necessary, though.

[facelessuser]

Oh, that makes sense. I was just curiously looking to see if I had inadvertently done the same thing on accident, then I saw the comment and realized I had done it purposely, not accidentally 🙃.