Bright flashes at the start of page loading meta bug

[m-khvoinitsky]

In order to reduce bright flashes, do the following:

• Use Firefox built-in Dark Theme
• enable browser.in-content.dark-mode in about:config

---

• #132 (desktop)
• #136 (android)
• bug 1393022/ #96 workaround: it leads to reloading certain stylesheets which leads to flash and broken layout for a short period of time. Bug reported to Firefox, they have intention to fix it.
• #133
• #134

[CaptaPraelium]

I think there may be an issue with the stylesheet processor making a white background. Please refer to this bug from another project where I describe my troubleshooting process, I hope it will be helpful: https://github.com/overdodactyl/ShadowFox/issues/49

[CaptaPraelium]

Little bump :) Any news on this?

[UralZima]

+1. Very annoying. Hope it can be fixed. I am using Firefox 52.6

[m-khvoinitsky]

The biggest issue is on Firefox side. Bug reported, I don't know when they'll fix it. Some parts on my side will be improved in the nearest update but it's quite minor.

[CaptaPraelium]

Did you have a read through my troubleshooting process? Here's a link to the specific comment where I narrow the issue down to the stylesheet processor. This seems not to be an issue with delays loading the scripts, but in the actual behaviour of the stylesheet processor. If it were a delay, I should have seen the green background that I set in the CSS.

[m-khvoinitsky]

@CaptaPraelium sorry for the delay. Yes, I've followed. However, used userContent.css instead of Stylus because Stylus is also WebExtensions and may suffer from similar restrictions. So, no, the roots a the same: #96 and #133. Here how usual bright flash looks like:

1. Bright #tabbrowser-tabpanels (in your case you darkened it using ShadowFox)
2. Bright html of blank, not yet loaded page (you've painted it into dark green)
3. Bright html, body, etc of newly loaded page, usually websites have this color somewhere in their CSS.
   • #133
4. My add-on starts working but can't initially process stylesheets because of bug 1393022/ #96 — it reloads stylesheets which causes page's (bright) CSS to stay longer (and break page layout for a while).

Also, reddit mostly has different origin (usually redditstatic.com) stylesheet while symthic.com has same-origin which completely makes it not affected by bug 1393022/ #96

It's also important which exactly bright flashes do you see: completely white empty screen or bright variant of a website?

[CaptaPraelium]

Thanks mate I don't mind waiting :) It seems like you've been waiting for mozilla for a year....

Having checked, I see both behaviours. On some sites it is a full page white, and on others I see the un-processed light version of the page. I could be wrong about this because it is a very quick flash and honestly it is somewhat blinding so I am sure I'm not seeing things properly... but for example on reddit I am pretty sure I see the banner image which is removed by the processor.

I guess it just seems strange to me, that I can successfully over-ride (using stylus and/or usercontent.css) any page's CSS to get the dark background, and this addon works fine, and I get no white flash.... except for the stylesheet processor which over-rides my over-ride, and brings back the flash. If I use the 'Simple CSS' option, it's fine.

[m-khvoinitsky]

If you don't mind building Firefox from source, I can provide you a "fix" for bug 1393022 so you can test if it reproduces. Quoted "fix" because it exposes too much power to WebExtensions and Mozilla would never accept it. But it sutable for testing.

[m-khvoinitsky]

"Fix" is in the first comment. If you have a spare time, you can try to apply this workaround to Firefox source code, build it and test.

[opsidjflksdf]

Not sure I get why Stylus+one of their dark styles gives no white flashes, whereas this extension has them, with the same Firefox version. @m-khvoinitsky can you do whatever Stylus does to get rid of them?

[m-khvoinitsky]

@m-khvoinitsky can you do whatever Stylus does to get rid of them?

Stylus and my add-on modify pages in a significantly different way. My add-on's "Simple CSS" is more similar to what Stylus does. You can try it and see if there are still more flashes than with Stylus.

[mpaunovic]

This is fixed in Firefox Nightly:

https://bugzilla.mozilla.org/show_bug.cgi?id=1488384

[ghost]

This is fixed in Firefox Nightly:

https://bugzilla.mozilla.org/show_bug.cgi?id=1488384

I'm not getting it on page reload or new tab anymore since this patch was released in Firefox 68, but I'm still getting bright white flashes occasionally on page transition, especially when using the back or forward buttons in the browser / with the mouse. This behavior seems to be mostly due to https://bugzilla.mozilla.org/show_bug.cgi?id=1393022 so this specific issue isn't resolved with FF68, unfortunately.

[m-khvoinitsky]

So, version 0.7.0 has been submitted to AMO (at the moment it is still waiting for review) which has huge improvements in this area. Everyone is encouraged to test.

In order to reduce bright flashes even more, do the following:

• Use Firefox built-in Dark Theme
• enable browser.in-content.dark-mode in about:config

[atomGit]

you didn't reduce the flash, you KILLED it - at least on the sites i quickly tested, including heavy ones like YouTube

and this is without having to use ...

#browser vbox#appcontent tabbrowser,
#content,
#tabbrowser-tabpanels,
browser[type=content-primary],
browser[type=content] > html {
    background: #000 !important;
}

browser.in-content.dark-mode is true by default in my case, regardless of browser theme setting

[m-khvoinitsky]

Well, there are few cases when they are still possible:

• inside iframes
• if you have at least one configured tab (the tab with assigned metod to < Current Tab >)
• just after launching of the browser
• probably in some other rare case when browser itself can flash white like the ones from bug 1488384