Arrow to a subgraph, which contains a child node with an arrow going out of the subgraph, sometimes faces the wrong direction

[190n]

Description

If you have a flowchart with three nodes, one contained in a subgraph, and:

• An arrow from a node outside the subgraph to the subgraph (not to the node inside it)
• An arrow from the node inside the subgraph to the other node outside the subgraph

Sometimes, depending on the size of the node inside the subgraph, the first arrow's head will point the wrong direction

Steps to reproduce

1. Paste the sample code into the live editor in Firefox
2. Observe that the left arrow's head faces towards the start of the arrow instead of the end
3. Change the number of zeroes in c's display name and see that the arrow changes its direction
4. Render the same document in the live editor in a different browser
5. In developer tools, replace the SVG for the buggy arrow in Firefox with the code generated for that arrow in another browser and observe that it is drawn correctly

Screenshots

Buggy example rendered incorrectly in Firefox (twenty 0 characters):

Non-buggy examples rendered in Firefox (19 and 21 0 characters):

Buggy example rendered correctly in Safari (twenty 0 characters):

Code Sample

flowchart LR
    a
    subgraph b
        c[00000000000000000000]
    end
    d

    a --> b
    c --> d

Setup

• Mermaid version: 10.9.1 live editor
• Browser and Version: Firefox 128.0.3 on macOS

Suggested Solutions

No response

Additional Context

The bug only appears on Firefox, but it's because the generated markup is different. On Firefox the problematic arrow is

<path marker-end="url(#graph-div_flowchart-pointEnd)" style="fill:none;" class="edge-thickness-normal edge-pattern-solid flowchart-link LS-a LE-b" id="L-a-b-0" d="M23.4,54.5L27.567,54.5C31.733,54.5,40.067,54.5,48.4,54.5C56.733,54.5,65.067,54.5,68.35,54.5C71.633,54.5,69.867,54.5,68.983,54.5L68.1,54.5"></path>

but on Safari and Chrome it's

<path marker-end="url(#graph-div_flowchart-pointEnd)" style="fill:none;" class="edge-thickness-normal edge-pattern-solid flowchart-link LS-a LE-b" id="L-a-b-0" d="M23.406,54.5L27.573,54.5C31.74,54.5,40.073,54.5,47.523,54.5C54.973,54.5,61.54,54.5,64.823,54.5L68.106,54.5"></path>

If I replace the markup in Firefox with the one used in Safari or Chrome, it's rendered correctly -- so it is not Firefox rendering the SVG wrong, but Mermaid generating different SVG in Firefox than in other browsers.

I believe every element of the sample document is necessary to trigger this bug:

• a's arrow must point to b instead of c
• c must be inside a subgraph
• d must not be inside the subgraph c is in