sequenceDiagram messages appear with line through them

Describe the bug

It seems that any version of MermaidJS >8.5.2 renders the sequence diagram messages with the line through them.

Once the version is downgraded to 8.5.2, the message labels appear correctly over the lines:

To Reproduce

(updated 2021-12-02)

Steps to reproduce the behavior:

1. git clone https://github.com/ourchitecture/hello-cloud/
2. Run make start-docs (requires GNU Make and docker). This will build and start a MkDocs Material site using “./mkdocs.yml” and “./src/docs”.
3. Visit http://localhost:8000/hello-cloud/contribute/ to see the diagrams in action
4. Edit the file “./mkdocs.yml” and upgrade the MermaidJS script:

   extra_javascript:
     - "https://unpkg.com/mermaid@8.13.4/dist/mermaid.min.js"
   

5. Hopefully, you also see the labels “pushed down” with the lines crossing through them …

Expected behavior

Message labels appear above the lines.

Screenshots

See above.

Code Sample

sequenceDiagram
    participant C as Contributor
    participant M as Maintainer
    participant R as Repository

    C->>R: Check roadmap
    R->>C: tada
    C->>R: Check roadmap
    R->>C: teedee

Desktop (please complete the following information):

• OS: Windows Pro 11
• Browser: Firefox
• Version: 94.0.2

Smartphone (please complete the following information):

n/a

Additional context

n/a

[ericis]

@Yash-Singh1 I’ve also updated the original “Steps to reproduce” with the lessons from above.

[Yash-Singh1]

Thanks for the clear writeup! I just hosted the site locally and found out that this bug is Firefox-specific.

I actually don’t know SVG, but I did find a temporary CSS solution:

.messageText {
    dominant-baseline: middle;
}