Mermaid objects cutting off text in README.md in Safari

[stoutgz]

Using mermaid in markdown in my READMEs and seems suddenly this week it no longer renders correctly specifically in Safari and also specifically in the repo README.md file. I can't reproduce in other browsers, nor @ gist.github.com.

This is how I reproduce:

graph TB
    top(Top project) --> sub1("Sub<br>Repo 1<br>⭐️ You are here!")
    top --> sub2(Sub<br>Repo 2)
    top --> sub3(Sub Repo 3)
    sub2 --> sub4(Sub Repo 4)
    sub2 --> sub5(Sub Repo 5)
    top --> sub6(Sub Repo 6)
    top --> sub7(Sub Repo 7)
    top --> sub8(Sub Repo 8)
    
    classDef here fill:#0000FF,stroke:#333,stroke-width:2px;
    class sub2 here

macOS 12.2 (M1 Pro)

• Safari 15.3
  • In repo README.md, looks like this:
    • 
  • On gist.github.com, looks like this:
    • 
• Brave Browser (Chromium-based) 1.35.104
  • In repo README.md, looks like this:
    • 
  • On gist.github.com, looks like this:
    • 

[adsteel]

This is happening for me on a Macbook Pro M2, using Ventura (13.2.1), in a gist, in Firefox, Chrome, and Safari, with even short words.

(Also note the fill colors render differently on different browsers)

Screenshots

Chrome

Firefox

Safari

Live example

graph TB
    classDef orange fill:#ff9966,stroke:#333;

    redis[("<strong>Redis</strong><br><small>(Redis)</small>")]

    redis

    class redis, orange

Loading