diff options
| author | silverwind <me@silverwind.io> | 2022-11-01 23:31:17 +0100 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2022-11-01 22:31:17 +0000 |
| commit | fd4e7447e7ef80ef397dbf91ae4bf3a3d5c6727f (patch) | |
| tree | 4233239961f6e8849224b947856f73a2b998c348 /web_src | |
| parent | 7a8e34b255190d176d3185f0d5049fb93b18adac (diff) | |
| download | gitea-fd4e7447e7ef80ef397dbf91ae4bf3a3d5c6727f.tar.gz gitea-fd4e7447e7ef80ef397dbf91ae4bf3a3d5c6727f.zip | |
Fix opaque background on mermaid diagrams (#21642) (#21652)
Backport #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:
<img width="1147" alt="Screen Shot 2022-10-31 at 13 30 55"
src="https://user-images.githubusercontent.com/115237/199017132-9828aace-bdd0-4ede-8118-359e72bcf2fe.png">
After:
<img width="1152" alt="Screen Shot 2022-10-31 at 13 30 36"
src="https://user-images.githubusercontent.com/115237/199017137-989a9e67-3fe0-445f-a191-df5bf290dabf.png">
Diffstat (limited to 'web_src')
| -rw-r--r-- | web_src/js/markup/mermaid.js | 1 | ||||
| -rw-r--r-- | web_src/less/markup/content.less | 1 |
2 files changed, 2 insertions, 0 deletions
diff --git a/web_src/js/markup/mermaid.js b/web_src/js/markup/mermaid.js index 62de9a3aae..984946045d 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 7ee55ea7f8..80c6267af8 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 { |