Text in mermaid diagrams is clipped in Firefox

[cbjoldham]

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 some mermaid flowcharts and seeing some minor formatting issues on Firefox vs Chrome - the last character in the strings is often truncated when not trivially short in Firefox.

Expected behaviour

Strings should not be trimmed in any browser

Actual behaviour

Strings in Firefox have the last character clipped when not trivially short

Steps to reproduce

This can be replicated on the main docs for instance the "g" of "Debug" is trimmed in Firefox but not Chrome : https://squidfunk.github.io/mkdocs-material/reference/diagrams/#using-flowcharts

Package versions

This can be replicated on the main docs

Configuration

This can be replicated on the main docs

System information

Windows 10 21H2 64-bit

• Firefox 96.0.3 (64-bit) - issue present
• Chrome 97.0.4692.99 (Official Build) (64-bit) - no issue
• Opera 82.0.4227.58 - no issue
• Edge 97.0.1072.76 (Official build) (64-bit) - no issue

[squidfunk]

So this is a very interesting bug that I just fixed in e1023a9 by changing one (1) character. SVG is an XML dialect, which means that tag names are case sensitive in CSS. However, Chrome and friends (hello Webkit) seem to ignore the case sensitivity and apply the CSS. Firefox not so much.

[facelessuser]

I believe this is only the case if the main document is HTML. If you try and apply CSS via Chrome to an SVG image/document, it will respect case sensitivity. It seems that the document type determines the sensitivity for the entire document, even if XML content is embedded within that document.

[squidfunk]

I believe this is only the case if the main document is HTML. If you try and apply CSS via Chrome to an SVG image/document, it will respect case sensitivity. It seems that the document type determines the sensitivity for the entire document, even if XML content is embedded within that document.

Is that behavior part of the specification, i.e. that case sensitivity propagates to embedded namespaces? Either Firefox is wrong, or Webkit. I'd say Webkit, because I would expect case sensitivity to be defined by the enclosing namespace.

[facelessuser]

That I don't know. I'm not sure I specifically ever looked up whether an SVG tag's content was supposed to respect an XML document's case sensitivity or the document's case sensitivity.

On the one hand, I get why it makes sense that a user would expect an XML element under an HTML5 document to respect XML-specific handling of CSS (case-sensitivity in this case).

But I also get why from a programmer's perspective it is much more desirable to set up the CSS engine for the document based on the document type as opposed to having the CSS engine do this context switching when it encounters an SVG element, MathML, etc.

I think when I was developing my CSS selector lib for BeatifulSoup, I took the Webkit route and determined that convention based on the doctype. As far as browsers were concerned, it seemed to be in the majority, whether right or wrong. Chrome and Safari seem to view it as a document-level decision, but that could be the wrong approach.

So, in short: 🤷🏻 .

[facelessuser]

It seems it is based on document language: https://www.w3.org/TR/selectors-4/#case-sensitive.

[squidfunk]

Thanks! Okay, so Firefox is off then. Probably related:
https://bugzilla.mozilla.org/show_bug.cgi?id=963870

[squidfunk]

The fix was just released as part of 8.1.9-insiders-4.7.2.

[cbjoldham]

Just pulled 8.1.9-insiders-4.7.2 and cured the clipping in our docs, appreciate the fast turn around and good spot!

[prathamesh-takane]

Hello, I have discovered this happening again, im using google chrome and recently learned that you can display flow charts in github so I gave it a shot, here is my code and its result

CODE(triple quotes removed here to avoid displaying diagram:
`

Data pipeline arch

mermaid

flowchart TD

    A[Flat files] -->B[Clean & Store: mongoimport<br><small><i>clean & populate into warehouse</i></small>]
    B --> C[Warehouse<br><small><i>store clean semi structured data</i></small>]
    C --> D[Processing: Spark Job<br><small><i>manipulate & aggregate based on requirements, populate cooked tables</i></small>]
    D --> E[Cooked Data<br><small><i>store structured data ready for user consumption</i></small>]

RESULT:

flowchart TD
    A[Flat files] -->B[Clean & Store: mongoimport<br><small><i>clean & populate into warehouse</i></small>]
    B --> C[Warehouse<br><small><i>store clean semi structured data</i></small>]
    C --> D[Processing: Spark Job<br><small><i>manipulate & aggregate based on requirements, populate cooked tables</i></small>]
    D --> E[Cooked Data<br><small><i>store structured data ready for user consumption</i></small>]

I might be making a silly mistake here, any help would be much appreciated 🙏