flowchart node label disappears when too wide

[DeD1rk]

Description

Since mermaid 11.0.0 (I tested that it does not occur on 10.9.1), on firefox, when I render a flowchart with somewhat long node labels, the node becomes an empty square.

However, on Chrome and Edge, it works fine, even with much larger content.

Steps to reproduce

1. Create a flowchart
2. Give a node a somewhat long label
3. On firefox, the node's content disappears

Screenshots

See on the right that there is no big box of multiple lines of 'a', no subgraph title, and not the second node in the subgraph with '.iiiii(...)'. From the different number of a's vs i's needed to trigger this, it seems to have to do with the width, not the number of characters.

Doing the same on chrome, with even more text:

Code Sample

https://mermaid.live/edit#pako:eNrtVMFuwjAM_ZXIpyGVqm1aCNGEtGnXnbbTyA6hCTSCJihNxRji35emoEnTOm0745P17Oc4fomPUBohgcJqa_Zlxa1Dz_dMM43Q3thNky4Y8G_tdmnn18hQhMHr5wzReDzvXYw6tGmXa8t31QUbnPG5CkJCWVk6ZXRQp0MCNbsZZo66PKlFL-aSi9Qn310V-4-Wo8sIg5Le-aJjQBaD4_1BxpVyjddF_c7OnYRePCv-Gy08BoiglrbmSvhPf-xgBq6StWRAvSu43TBg-uTzeOvM00GXQJ1tZQTtTnAnHxT3l66Brvi28eiOa6BHeAM6zoq4mCRTgjGZZDjJpxEcgKYZiTFOSU7SPC9wmhWnCN6N8SWSmMzy2aSYTTHJkiQhRQRSKGfsY7-VwnIKZ7wEQt-INe26Ojdw-gCP2af3

Setup

• Mermaid version: 11.0.0 (tested myself), 11.0.2 (on the online editor)
• Browser and Version: Firefox (129.0)

Suggested Solutions

No response

Additional Context

I think this may relate to https://github.com/mermaid-js/mermaid/issues/5698, but I wanted to provide more complete information so opened a new ticket anyway.

[dolt]

Mitigation turn off htmlLabels when user agent is Firefox:

    flowchart: {
        htmlLabels: !navigator.userAgent.includes('Firefox'),
    },

When it doesn't render:

<foreignObject height="0" width="0">

When it does render:

<foreignObject height="24" width="197.43333435058594">

[dolt]

The div being inserted (addHtmlLabel?) is not setting properties I would expect to be set:

<foreignObject height="0" width="0"><div xmlns="http://www.w3.org/1999/xhtml" style="display: table; white-space: break-spaces; line-height: 1.5; max-width: 200px; text-align: center; width: 200px;"><span class="nodeLabel">

According to the code, white-space should be nowrap: https://github.com/mermaid-js/mermaid/blob/115cb071b09056c34c9b750579432d4232a10500/packages/mermaid/src/rendering-util/rendering-elements/createLabel.js#L43-L47

[DeD1rk]

Thanks for investigating! Indeed setting htmlLabels: false fixes the content not showing up. The thing is though, in my actual use case, I'm relying heavily on html content. For example with nodes like this (though often much bigger, e.g. with code blocks inside, that cannot be migrated to just markdown):

s443("<span class='mermaid-step-header'><b>Placeholder</b> (Manual Step)</span><br>Type: XXXXXXXXXXXXXXXXXXXXX")

[jrobsonchase]

I'm seeing this as well. Can confirm that the generated elements in the svg are different between the two browsers.

flowchart TD
    foo[aaaaaaaaaaaaaaaaaaaaaaa]

firefox:

<g transform="translate(0, 0)" style="" class="label"><rect></rect><foreignObject height="0" width="0"><div xmlns="http://www.w3.org/1999/xhtml" style="display: table; white-space: break-spaces; line-height: 1.5; max-width: 200px; text-align: center; width: 200px;"><span class="nodeLabel"><p>aaaaaaaaaaaaaaaaaaaaaaa</p></span></div></foreignObject></g>

vs chrome:

<g transform="translate(-102.3359375, -12)" style="" class="label"><rect></rect><foreignObject height="24" width="204.671875"><div style="display: table; white-space: break-spaces; line-height: 1.5; max-width: 200px; text-align: center; width: 200px;" xmlns="http://www.w3.org/1999/xhtml"><span class="nodeLabel"><p>aaaaaaaaaaaaaaaaaaaaaaa</p></span></div></foreignObject></g>

Both from the mermaid-js live editor, but the github renderer is also affected.

[sdyura]

this is really broken for me, when i try and do:

'''mermaid
flowchart TD
    CheckStatusForTriggerProcessingPath[CheckStatusForTriggerProcessingPath]-->CheckStatusForTriggerProcessingPath_CheckStatusForTrigger[CheckStatusForTriggerProcessingPath_CheckStatusForTrigger]
    TriggerSwitchingProcessingPath[TriggerSwitchingProcessingPath]-->TriggerSwitchingProcessingPath_ValidateRegistrationFlowStart[ValidateRegistrationFlowStart]
    TriggerSwitchingProcessingPath[TriggerSwitchingProcessingPath]-->TriggerSwitchingProcessingPath_TriggerSwitchingProcess[TriggerSwitchingProcessingPath_TriggerSwitchingProcess]
    CheckStatusForTriggerProcessingPath[CheckStatusForTriggerProcessingPath]-->TriggerSwitchingProcessingPath[TriggerSwitchingProcessingPath]
'''

flowchart TD
    CheckStatusForTriggerProcessingPath[CheckStatusForTriggerProcessingPath]-->CheckStatusForTriggerProcessingPath_CheckStatusForTrigger[CheckStatusForTriggerProcessingPath_CheckStatusForTrigger]
    TriggerSwitchingProcessingPath[TriggerSwitchingProcessingPath]-->TriggerSwitchingProcessingPath_ValidateRegistrationFlowStart[ValidateRegistrationFlowStart]
    TriggerSwitchingProcessingPath[TriggerSwitchingProcessingPath]-->TriggerSwitchingProcessingPath_TriggerSwitchingProcess[TriggerSwitchingProcessingPath_TriggerSwitchingProcess]
    CheckStatusForTriggerProcessingPath[CheckStatusForTriggerProcessingPath]-->TriggerSwitchingProcessingPath[TriggerSwitchingProcessingPath]

all i see is: