Subscript rendering in graph broken in Safari

While reading @sipa’s post on cluster mempool I noticed a glitch:

Strangely in Safari on macOS 13.6.4 and 14.3.1 the subscripts numbers are missing from the graph. They seem to get bunched in the top-left corner:

They do render correctly in Chrome.

Bringing this up in a meta topic to not distract the conversation there.

Do you get the same behaviour on a gist or in the live editor? Here’s the source for easy cutting and pasting:

graph BT
   t5["t<sub>5</sub>"] --> t2["t<sub>2</sub>"];
   t6["t<sub>6</sub>"] --> t2;
   t6 --> t3["t<sub>3</sub>"] --> t1["t<sub>1</sub>"];
   t7["t<sub>7</sub>"] --> t4["t<sub>4</sub>"];

If it’s buggy there, probably file an issue upstream? If it’s fixed upstream, could probably manually update the component until discourse gets around to an official update.

I get the same in the live editor.

I’m not familiar enough with Graphviz (?) and how the Delving forum (and Mermaid?) works to file a bug report.

These diagrams are based on https://mermaid.js.org/ (unrelated to graphviz) so just filing an issue on their github giving the demo of what doesn’t work and saying it doesn’t work on safari should be fine? If it occurs on the live editor, it’s not related to discourse forums, so you don’t need to be familiar with that. Might just be a safari rendering bug too, I guess?

Done (also checked that it’s not fixed in the dev branch): Subscripts are bunched in a corner in Safari · Issue #5339 · mermaid-js/mermaid · GitHub

1 Like