SVG rendering inconsistency when running on Linux in Docker

[TomerAberbach]

Not sure if this is a mermaid-isomorphic issue or a Playwright issue, but I'm encountering a rendering issue that only occurs when deploying my website to fly.io, which runs on Linux in Docker. When I build my website locally on my Mac for production the issue doesn't occur.

Locally:

On Fly (live blog link):

My guess is that Playwright is rendering the font slightly differently than a normal headful browser, so the box sizes it sets for the SVGs end up being incorrect when viewed in a headful browser.

Wondering if you have any ideas for what I should try? Appreciate any insights you have! Further details below.

---

My website code that uses mermaid-isomorphic (through rehype-mermaid):
https://github.com/TomerAberbach/website/blob/main/src/services/posts/parse/convert.server.ts#L181-L188

My Dockerfile:
https://github.com/TomerAberbach/website/blob/main/Dockerfile

I confirmed that I have all of the necessary Playwright dependencies installed in the container. Playwright will print a warning if you are missing some dependencies, and it stopped printing out warnings once I installed them all. Example deployment log:
https://github.com/TomerAberbach/website/actions/runs/10798633747/job/29952544461

Note that I confirmed the fonts are actually getting loaded in the deployed version. I patched mermaid-isomorphic locally and added some logging. I confirmed that "Kantumruy Pro" is printed out as one of the loaded fonts when the server starts up.

I also tried with and without PLAYWRIGHT_CHROMIUM_USE_HEADLESS_NEW=1 and it didn't make a difference.

[TomerAberbach]

I guess microsoft/playwright#12683 sorta confirms that Chromium rendering can be a bit inconsistent between headless and headful

Maybe I should try out other browsers

[TomerAberbach]

Scratch that. I tried Firefox and it has the same issue exactly 🤷

[TomerAberbach]

WOAH, TomerAberbach/website@6742a01 finally fixed the problem!

Not sure if you want to make these args the defaults or maybe just make a note in the readme. I'll leave that to you! The TL;DR from that issue thread I linked is that Linux can have pretty severe text rendering diffs between headless and headful mode. It seems that MacOS doesn't have that issue, which is why I didn't notice it when testing locally.

[remcohaszing]

Interesting issue. The issue linked in your code comment contains various solutions. Is there any reason why you went with puppeteer/puppeteer#2410 (comment)? puppeteer/puppeteer#2410 (comment) feels nicer, as it’s not browser specific.

[TomerAberbach]

Honestly, since the first thing worked I didn't bother trying the second thing.

Would it be helpful to you for me to check if that also fixes it for me? Were you thinking of automatically including that CSS in this package?

[remcohaszing]

I use Linux myself. I have a Windows VM which I can use to inspect things in case I really have to. I don’t have access to macOS, so I can’t test that. I’m also really busy currently. I will have look myself when I have the time. But this does seem like a bug that needs to be fixed. Ideally this could even lead to pixel-perfect image snapshots.

It would be really helpful if you could provide:

• The diagram source code.
• A script to render the diagram.
• The results of the diagram rendered on macOS both headful and headless, ideally from multiple browsers. Results on Linux/Windows would be welcome too, but I could produce those myself.
• The playwright-core version used.

[aloisklink]

The issue might also be the fonts installed on your server. Edit: Ah, sorry, I didn't notice you were loading custom fonts and had already confirmed that they were working (see #6 (comment)). I'll keep the rest of my comment below in case it helps anybody else having a similar issue:

I believe mermaid-isomorphic uses Arial (see

mermaid-isomorphic/README.md

Lines 71 to 73 in 3334704

	By default `mermaid-isomorphic` uses the `arial,sans-serif` font family. This font family is mostly
	compatible across all browsers and devices. If you wish to use a custom font, you need to specify
	both the `mermaidConfig.fontFamily` and `css` options.

), which I believe is installed by default on Apple/Windows devices, but it's not installed by default on Linux/Android devices.

So if your Docker container doesn't have Arial installed, it might use a different font to render the text boxes, which makes it too small to fit the text on a PC that does have Arial installed.

You can install Arial on most Linux distros for free using https://en.wikipedia.org/wiki/Core_fonts_for_the_Web, but it's a bit of a pain, since they can legally only be distributed as .exe files, so you can't legally make a Docker image with them installed.

[TomerAberbach]

I use Linux myself. I have a Windows VM which I can use to inspect things in case I really have to. I don’t have access to macOS, so I can’t test that. I’m also really busy currently. I will have look myself when I have the time. But this does seem like a bug that needs to be fixed. Ideally this could even lead to pixel-perfect image snapshots.

It would be really helpful if you could provide:

• The diagram source code.
• A script to render the diagram.
• The results of the diagram rendered on macOS both headful and headless, ideally from multiple browsers. Results on Linux/Windows would be welcome too, but I could produce those myself.
• The playwright-core version used.

This fell off my radar, but I'll try to get to it soon!

[TomerAberbach]

The issue might also be the fonts installed on your server.

I believe mermaid-isomorphic uses Arial (see

mermaid-isomorphic/README.md

Lines 71 to 73 in 3334704

	By default `mermaid-isomorphic` uses the `arial,sans-serif` font family. This font family is mostly
	compatible across all browsers and devices. If you wish to use a custom font, you need to specify
	both the `mermaidConfig.fontFamily` and `css` options.

), which I believe is installed by default on Apple/Windows devices, but it's not installed by default on Linux/Android devices.
So if your Docker container doesn't have Arial installed, it might use a different font to render the text boxes, which makes it too small to fit the text on a PC that does have Arial installed.

You can install Arial on most Linux distros for free using https://en.wikipedia.org/wiki/Core_fonts_for_the_Web, but it's a bit of a pain, since they can legally only be distributed as .exe files, so you can't legally make a Docker image with them installed.

The fonts are correctly loaded from Google fonts. See this part of the initial issue description:

Note that I confirmed the fonts are actually getting loaded in the deployed version. I patched mermaid-isomorphic locally and added some logging. I confirmed that "Kantumruy Pro" is printed out as one of the loaded fonts when the server starts up.

I already confirmed what the actual issue is. See the rest of the thread.

[remcohaszing]

I believe mermaid-isomorphic uses Arial

Yes, Arial (or a compatible alternative alias) is available on Android and most Linux distros. This is not a problem. It’s ok to use Arial after running playwright install. Different OSes and browsers render slightly different results, but it comes down to ~1px changes over entire diagrams. This is something else.

I still appreciate everyone chipping in :)