diff options
| author | silverwind <me@silverwind.io> | 2022-10-31 21:57:31 +0100 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2022-10-31 20:57:31 +0000 |
| commit | 57a0a7ef64022ec984a85a8dd73224a66e959ffc (patch) | |
| tree | 4e8aa058edd2f42ae3b11e1457dd3d4a5b15858b /docs/content | |
| parent | 9a70a12a341b8e7773efc661693e4b7e3199a4bd (diff) | |
| download | gitea-57a0a7ef64022ec984a85a8dd73224a66e959ffc.tar.gz gitea-57a0a7ef64022ec984a85a8dd73224a66e959ffc.zip | |
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">
Diffstat (limited to 'docs/content')
0 files changed, 0 insertions, 0 deletions