Dashboard dark theme white flashing

[u-RraaLL]

Launching or reloading dashboard on dark theme causes white flashing.

This is mostly a uBO issue, because it happens on all browsers.

• uBO - because only launching and reloading Dashboard causes full page flashing. Launching/reloading logger or code viewer or switching dashboard tabs only flashes input fields and buttons, which is not a deal breaker.
• Browser - because prior to 138, you could set Firefox's browser.display.background_color to override white flashing. Unfortunately, mozilla messed with their themes and it's currently impossible to change the white background without forcing the contrast colors for everything inside the browser too. And the issue shows up on chromium-engine browsers too.

A big part of the dashboard issue is the .notReady class with display: none. Changing it in a local build to visibility: hidden or removing the class altogether fixes the issue for regular page refreshes, Launching from popup or refreshing bypassing cache still flashes white though.

Any ideas how to fix the full dashboard white flashing, even when launching from popup? @gorhill could you take a look to see what the issue is with dashboard compared to logger and code viewer?

[gorhill]

The panes in the dashboard are iframe-based.

[u-RraaLL]

Ok, so there's no way of fixing this other than using tricks such as changing visibility onload, which is not likely to happen for uBO?
That's too bad. I guess I should bother mozilla to fix what they've broken...

[gorhill]

There were reports of flashing white or black back then when I implemented dark theme. The solution for this is to ensure that the browser is set to dark theme to avoid white flash, or light theme to avoid dark flash -- i.e. there should be no issue when uBO theme matches the browser theme. Otherwise this is unavoidable, unless maybe if using user CSS to specifically force uBO's iframe to have a dark default background color.

[uBlock-user]

I already opened a issue about this. Let me search.

#1284

[gorhill]

And the issue shows up on chromium-engine browsers too.

Yeah ok, I can see this with Chromium when the browser is set to dark theme. The odd thing is that when I put a breakpoint before applying the theme in uBO, the dev tools reports the background color as being dark, but I see it as light:

This is unexpected: why would the browser actually renders white while at the same time reporting the color being black?

If I explicity set background-color: var(--surface-0);, then the issue goes away.

[qupig]

rgba(0, 0, 0, 0); is transparent, not black.