1
0
Fork 0
mirror of https://codeberg.org/forgejo/forgejo.git synced 2024-12-10 11:25:56 -05:00
forgejo/web_src/js/markup
silverwind fd4e7447e7
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">
2022-11-01 22:31:17 +00:00
..
anchors.js Use a generic markup class to display externally rendered files and diffs (#15735) 2021-05-07 10:43:41 +02:00
codecopy.js Add copy button to markdown code blocks (#17638) 2021-11-16 16:16:05 +08:00
content.js Add KaTeX rendering to Markdown. (#20571) 2022-09-14 00:33:37 +08:00
math.js Add KaTeX rendering to Markdown. (#20571) 2022-09-14 00:33:37 +08:00
mermaid.js Fix opaque background on mermaid diagrams (#21642) (#21652) 2022-11-01 22:31:17 +00:00
tasklist.js Use explicit jQuery import, remove unused eslint globals (#18435) 2022-01-28 21:00:11 +00:00