mirror of
https://github.com/go-gitea/gitea.git
synced 2024-09-05 23:34:19 -04:00
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: <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">
This commit is contained in:
parent
9a70a12a34
commit
57a0a7ef64
@ -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}
|
||||
`;
|
||||
|
@ -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 {
|
||||
|
Loading…
Reference in New Issue
Block a user