From 57a0a7ef64022ec984a85a8dd73224a66e959ffc Mon Sep 17 00:00:00 2001 From: silverwind Date: Mon, 31 Oct 2022 21:57:31 +0100 Subject: [PATCH] Fix opaque background on mermaid diagrams (#21642) Browsers introduce a opaque background on iframes if the iframe element's color-scheme does not match the document's color scheme which in case of a dark theme results in a mismatch and the browser adds a white background. Avoid this by specifying the same color scheme outside and inside the iframe. See https://fvsch.com/transparent-iframes for more info. My initial attempt was to make the iframe document the same color-scheme as the parent page (light or dark) but with that, there was a ugly background flash on load in Chrome because Chrome apparently always loads iframe in light scheme initially. Firefox still shows a background flash on load but this is not possible to get rid of and it's certainly a browser bug. Before: Screen Shot 2022-10-31 at 13 30 55 After: Screen Shot 2022-10-31 at 13 30 36 --- web_src/js/markup/mermaid.js | 1 + web_src/less/markup/content.less | 1 + 2 files changed, 2 insertions(+) diff --git a/web_src/js/markup/mermaid.js b/web_src/js/markup/mermaid.js index 62de9a3aa..984946045 100644 --- a/web_src/js/markup/mermaid.js +++ b/web_src/js/markup/mermaid.js @@ -2,6 +2,7 @@ import {isDarkTheme} from '../utils.js'; const {mermaidMaxSourceCharacters} = window.config; const iframeCss = ` + :root {color-scheme: normal} body {margin: 0; padding: 0} #mermaid {display: block; margin: 0 auto} `; diff --git a/web_src/less/markup/content.less b/web_src/less/markup/content.less index 7ee55ea7f..80c6267af 100644 --- a/web_src/less/markup/content.less +++ b/web_src/less/markup/content.less @@ -537,6 +537,7 @@ width: 100%; height: var(--height-loading); // actual height is set in JS after loading overflow: hidden; + color-scheme: normal; // match the value inside the iframe to allow it to become transparent } .markup-block-error {