Mermaid charts not rendering correctly on production
What is/are the relevant URLs or emails?
- https://about.gitlab.com/handbook/marketing/blog/unfiltered/#is-my-blog-post-right-for-unfiltered
- Any handbook entry with a mermaid graph.
Briefly describe the bug
Mermaid charts won't render correctly ( see attached screenshots for expected and actual behavior )
What are the steps to reproduce the bug
- Navigate to a page with a Mermaid chart on it on the production environment
- Reload the page
What is the observed behavior? Be specific.
- Charts don't render, leaving the source text instead of a chart
What is the expected behavior? Be specific.
- Charts should be visible
What is your window size, browser, operating system, and versions
https://whatsmybrowser.org/b/L6XGBWB
Have you tried an incognito window? Could this be related to cookies or account type/state?
The behavior isn't exhibited in a fresh incognito window but is exhibited after refreshing the page.
Have you already tried to fix it? If so, what have you tried?
At first glance this appears to be related to Cookiebot and the presence of a CookieConsent cookie but I'm having difficulty figuring out why. I could be wrong about the suspected cause but this would correlate with why it only happens on production.
- Exempting the mermaid script from cookiebot doesn't seem to fix it.
- Moving the script outside of cookiebot doesn't seem to fix it.
- Manually invoking the script using the console DOES work, which is why I suspect the problem to be related to the document/window/whatever ready state.
The mermaid library attempts to attach itself to the document/window ready state and Cookiebot's auto functionality could be interrupting that. An alternate theory is that something breaks a script which causes a chain of events that breaks other scripts and interrupts expected behavior. It could also be a standard javascript race condition or something else entirely.
I am unsure where to go from here.