uBlock₀ — Dashboard FOUC white flash in dark mode

[qupig]

Prerequisites

• I verified that this is not a filter list issue. Report any issues with filter lists or broken website functionality in the uAssets issue tracker.
• This is NOT a YouTube, Facebook or Twitch report. These sites MUST be reported by clicking their respective links.
• This is not a support issue or a question. For support, questions, or help, visit /r/uBlockOrigin.
• I performed a cursory search of the issue tracker to avoid opening a duplicate issue.
• The issue is not present after disabling uBO in the browser.
• I checked the documentation to understand that the issue I am reporting is not normal behavior.

I tried to reproduce the issue when...

• uBO is the only extension.
• uBO uses default lists and settings.
• using a new, unmodified browser profile.

Description

In dark mode, a momentary FOUC white flash occurs when opening and refreshing the Dashboard page, which is very annoying and unfriendly to the eyes.

Adding the following to the dashboard.html page should fix the issue:

<meta name="color-scheme" content="light dark" />
<style>
:root {
	color-scheme: light dark;
	background-color: light-dark(rgb(240, 240, 242), rgb(27, 27, 35));
}
</style>

A specific URL where the issue occurs.

moz-extension://637c5b58-c248-4b59-aaff-17ada4d976c1/dashboard.html#settings.html

Steps to Reproduce

1. Both the system and browser are in dark mode
2. Click toolbar uBlock Origin browser action button (popup)
3. Click Open the dashboard button in the popup
4. The moment you open the dashboard, the white flash will occur
5. Click browser Reload current page button (or Command+R), reproduce again

Expected behavior

No annoying FOUC white flash 🙏

Actual behavior

Have annoying FOUC white flash almost everytime 💥

uBO version

uBlock Origin 1.63.2

Browser name and version

Firefox

Operating System and version

macOS

[uBlock-user]

Duplicate of #1284

[qupig]

Duplicate of #1284

No, it's not a duplicate. The issue are not exactly the same.

And perhaps I should say that there is no "black flash" there, only "white flash":

Before the fix:

System Theme	Unstyled Theme	App Theme
Light	Light	Light
Light	Light	Dark
Dark	Light	Light
Dark	💥Light💥	Dark

After the fix:

System Theme	Unstyled Theme	App Theme
Light	Light	Light
Light	Light	Dark
Dark	Dark	Light
Dark	Dark	Dark

[uBlock-user]

No, it's not a duplicate. The issue are not exactly the same.

and what is different specifically? I face he same issue since 2020 as per the STR you posted here.

I should say that there is no "black flash" there, only "white flash":

Reverse the theme, reverse the flash, simple as that.

[qupig]

and what is different specifically? I face he same issue since 2020 as per the STR you posted here.

Your issue mainly involves flash when switching panes, which no longer exists.

And your issue is marked as completed, but the issue still exists.

Reverse the theme, reverse the flash, simple as that.

The flash is only when the Unstyled state in the middle is different from both sides.

Check the table, black flash does not occur.

[gorhill]

Issue #1284 is still valid. However the issue reported here is that even when the browser theme matches uBO's theme, there is a FOUC -- I didn't expect this, and I assumed this was the issue in our other ongoing conversation. However examining more closely with browser tools, I see that for some reasons, the background is rendered light even though the browser tools report it as being set to dark. I don't know the reason for this.

In any case, if I explicitly set the color to that assigned as per prefer-color-scheme, the issue goes away. The issue will not go away though when the browser theme does not match uBO's selected theme, as per #1284 -- this one is still wontfix.

[uBlock-user]

Check the table, black flash does not occur.

Occurs for me.

Your issue mainly involves flash when switching panes, which no longer exists.

yeah, that was true initially, then it turned into current issue - #1284 (comment)

[qupig]

Issue #1284 is still valid. However the issue reported here is that even when the browser theme matches uBO's theme, there is a FOUC -- I didn't expect this, and I assumed this was the issue in our other ongoing conversation. However examining more closely with browser tools, I see that for some reasons, the background is rendered light even though the browser tools report it as being set to dark. I don't know the reason for this.

In any case, if I explicitly set the color to that assigned as per prefer-color-scheme, the issue goes away. The issue will not go away though when the browser theme does not match uBO's selected theme, as per #1284 -- this one is still wontfix.

Even if I explicitly set uBO's theme to Dark, there is still FOUC white flash.

The issue is that you have to add a <meta> or :root CSS declaration in the root template html so that the browser will not render the default white background when the app is not yet loaded on the page.

This issue is definitely solvable.

[gorhill]

This issue is definitely solvable.

It's fixed on my side with gorhill/uBlock@b604524.

[qupig]

Related documents can be read here:
https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/meta/name#color-scheme
https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme

Adding one of the two will work, adding both is just better.

<meta name="color-scheme" content="light dark" />
<style>
:root {
	color-scheme: light dark;
	background-color: light-dark(rgb(240, 240, 242), rgb(27, 27, 35));
}
</style>

[u-RraaLL]

I've tested r3 and seems the outcome is still the same as it would've been with changing .notReady display: none to visibility: hidden, like I've mentioned here: #3630

Launching Dashboard = white flash.
Refreshing = no flash.
Cache bypass refreshing = white flash.

---

@qupig Did you see the issue prior to getting Firefox 138? I've never seen it prior to this version since I've had my FF background color set to black years ago, only for the setting to be ignored since this version.

[uBlock-user]

Launching Dashboard = white flash.

Correct, this issue still persists.

[Gitoffthelawn]

FWIW, with release of Firefox 138, I've noticed many occurrences of FOUC on many sites. I think Mozilla may have unintentionally made a change that is causing additional problems (although FOUC is nothing new). I've had to implement special CSS on many sites to resolve the FOUC that wasn't needed before Firefox 138. May be worth creating a Bugzilla report if someone has the time to write a quality bug report.