Fenix: Set initial loading content page color to non-white when using dark mode

[cpeterso]

Why/User Benefit/User Problem

Currently opening a new page temporarily shows a pure white page before loading actual content regardless of the browser theme.

What/Requirements

Fenix does not give a way to control this while on Windows this can be controlled by browser.in-content.dark-mode pref (which is on by default on Nightly 71 and makes the page gray).

The white flash is the page clear color, which Fenix can already set clear color using GV API CompositorController.setClearColor.

Fenix clear color should probably change the clear color depending on Fenix's or Android's dark mode settings.

This bug was originally filed in Bugzilla:
https://bugzilla.mozilla.org/show_bug.cgi?id=1589576

Acceptance Criteria (how do I know when I’m done?)

Opening a new page when dark mode is enabled does not flash a pure white page before loading actual content.

[nt1m]

@cpeterso browser.in-content.dark-mode is enabled by default even on Release since Firefox 70. See: https://bugzilla.mozilla.org/show_bug.cgi?id=1565051

I think Fenix should just follow the theme that's chosen by the user though.

[ekager]

From Bugzilla:

The white flash is the page clear color, which Fenix can already set clear color using GV API CompositorController.setClearColor.

[ekager]

Chatted with the GV team on Riot and unfortunately the above solution likely does not work anymore with WebRender enabled. FxR uses a dummy surface with the correct color until they get a onFirstContentfulPaint and that's probably the direction we'd have to go as well to fix this.

[dholbert]

Here's a screencast of what this looks like, FWIW:
https://www.dropbox.com/s/zne4d8tdfwybtnj/flash-of-white.mp4?dl=0

There's a flash of white (due to this bug) at around 0:04, while the keyboard is disappearing.

[532910]

There was a gif in #10158

[ekager]

Opened AC issue https://github.com/mozilla-mobile/android-components/issues/6757

[Kreuger]

@ekager Hey is there any update on this? I see you submitted 2 commits for this. Does that mean it's being improved?

[ekager]

@Kreuger yeah I have a work in progress that will hide the web content until the content appears so it should improve the behavior a bit. Unfortunately on a site that doesn't support dark mode and is very white (ie CNN) it'll still be jarring when the content appears

[Kreuger]

@ekager Ok thanks for the update!

[B0pol]

It's definitively greater! But sadly not fixed entirely.
I've noticed it's fixed in two cases

• top sites
• search query

But it still happens a when

• opening a new tab with long press on a link -> new tab
• killing the tab you've just opened in the last step with back button
  (No gif for these two situations)
• opening a new tab via an external app (see the gif 1 below)
• exiting the settings (gif 3)
• restoring the browser (gif 4)

GIF 1: Via an external app, it shows that you have a very short flash the first time, and a looong flash the next time you open it (and every next time in fact).

(I enabled dark reader because it makes the white flash more noticeable, but it's also reproducible without dark reader).
I'm using nightly 200516.

Gif 2: slowed down to show the first short flash: you can notice on the GIF that the color is perfect, and then it gets suddenly whiter (but not entirely) and it goes back to the right color.

Gif 3:
When you exit settings:

Gif 4: When you restore the browser:

[ekager]

Thanks for the details @B0pol ! https://github.com/mozilla-mobile/fenix/pull/10707 should resolve this last issue

[Kreuger]

Hello I'm just wondering what the E5 label means. It's not mentioned in the labels on the wiki.

[lnicola]

@Kreuger it's labelled as "estimation point", which is a measure of the effort or time required for a task, used for project management purposes.

There are multiple E labels, e.g. an E5 task is expected to be 5 times larger than an E1 task.

[Kreuger]

Thanks!

[B0pol]

Why has https://github.com/mozilla-mobile/fenix/commit/d66762910fd402b8456b3e74dade62a713bb1a66 been reverted? It fixes two situations as I said above (top sites and search query), it's way better than nothing.

[opusforlife2]

Has any developer tested this with the extension Dark Background and Light Text? I was just using Fennec where I have it installed and remembered with some surprise that it _doesn't have any white flashes between page loads._ And this is a browser that doesn't even _have_ a dark mode. This is probably the reason why I found the shift to Fenix so jarring.

Maybe the extension could be a temporary solution until someone resumes work on this issue. It's a Recommended Extension on desktop, as well. No hurdles there.

To be clear, Fennec with the extension disabled _does_ show white flashes between pages, but _doesn_'t with the extension enabled.

[jenabaivab]

Is this being worked on? I have tried this with both beta and nightly, but both give similar results.
Anybody knows any workarounds at least?

[Rushilotti]

Is this being worked on? I have tried this with both beta and nightly, but both give similar results.
Anybody knows any workarounds at least?

If your mobile is rooted you can use userChrome.css and user content.css to change this but there is no fix for non rooted phones. Hope devs will fix this ASAP as this is so annoying and irritates me all the time and I don't want to root my phone just for the sake of this.

[ekager]

Hey everyone! Thanks for your patience on this issue. If you would like to help us test this I have added a potential fix to secret settings, but we want to make sure it works before releasing it to nightly (since the worst case is pretty bad -> the engine content won't show up). You'll need to tap five times the Firefox logo on the "About" screen to enable the "Secret Settings" screen in the settings. Then the new setting to toggle is "Wait Until First Paint To Show Page Content".

This should fix the cases of the white flash while

• opening a new tab via search, switching to unloaded tab, opening a top site/history/bookmark etc
• opening a link in custom tab

If you do end up testing it please report any issues with STR if possible in this issue and tag me. Thanks for your help! :)

[andreicristianpetcu]

thank you @ekager
can you please trigger a new build? https://firefox-ci-tc.services.mozilla.com/tasks/index/mobile.v2.fenix.nightly.latest/arm64-v8a

[ekager]

Secret settings are only available in debug builds for now because of the higher risk of breakage (which is what we previously did for the tabs tray) @andreicristianpetcu

We could think about opening this up to more testers in Nightly once we minimize some risk 👍

[ekager]

Actually on second thought, since it's in secret settings that's probably fine 😆 I'll change that and update here when that's done :)

EDIT: This will be in tomorrow's nightly!

[andreicristianpetcu]

I found it here https://firefox-ci-tc.services.mozilla.com/tasks/index/mobile.v2.fenix.debug.latest/arm64-v8a

[cadeyrn]

@ekager This causes a worse user experience because now it flickers - there is first a white flash before the screen becomes dark.

[Booligoosh]

It's working perfectly for me in the latest update, thank you!! (I have Dark Reader installed if that's relevant)

[jenabaivab]

I tested the new build, and I have to say I agree with @cadeyrn . While this is definitely better than the current scenario, the flickering is also an issue now. Whenever I search, or change the tab content, it flickers bright white. At least now we are going somewhere with this, so it's great in my opinion. Just a bit more polishing and it'll be perfect.

[andreicristianpetcu]

Thank you @ekager ! New tab works great. I don't use dark reader.
The only issue I have is the one mentioned above.

[Booligoosh]

Oh, now that you mention it, I'm seeing that issue as well (with dark reader). Still an improvement though :)

Edit: I also see the white flash when opening a page from my top sites section, and when opening Firefox from multitasking or the launcher.

[ekager]

Hey ya'll! Landed some changes today that I think will improve the white flashes in tomorrow's nightly. Keep the feedback coming! I am going to be offline next week but will try to follow-up ASAP.

[cadeyrn]

With the latest changes there are no longer white flashes.

[igalic]

on

Nightly 200806 06:02 (Build #22190614)
AC: 53.0.20200804130112, 789a73eb2
GV: 81.0a1-20200803094100
AS: 61.0.10

from

Thursday 8/6 @ 6:13 AM

still seeing white flash on page load

---

video evidence:

y'all better appreciate this gif, and the hours and hours of work, blood and tears it took to convert an mp4 to a gif, because github doesn't accept mp4

[yoasif]

y'all better appreciate this gif, and the hours and hours of work, blood and tears it took to convert an mp4 to a gif, because github doesn't accept mp4

@igalic I just zip up the mp4s - tip for next time.

[B0pol]

GIF is better because we can stream it on GitHub.

You can lower your record quality (no need for 1080p) and convert to GIF with video transcoder on F-Droid (lower framerate or quality if it's higher than 10 MB), it will take you only few minutes

[jenabaivab]

Current scenario on the latest Nightly Version

I'm guessing now the work to be done is by dark reader dev team. Basically negate the delay in changing the background. What do you guys think?
Or maybe increase the duration of black background a little till the Extension kicks in.

[jenabaivab]

Okay maybe not entirely. There are still flashes when I go back from settings to the webpage or from search tab to the web page

[Gusted]

I'm guessing now the work to be done is by dark reader dev team. Basically negate the delay in changing the background. What do you guys think?

Hi!

I'm from the dark reader team, who is just silent eating popcorn and watching this issue as it's impact our Fenix users.
I can confirm the first CSS we inject into the page is

html {
    background-color: #181a1b !important;
}

Here is the code for injecting the dark background-color, later it's being taken over by a other Rule but that it's rather as the fallback is pure to try prevent any flashes and not further needed when the dynamic changes kick in.

To make the page when not fully loaded yet already dark and try to prevent any further flashes. However it seems like there a is a notice able time between the Extensions starts(and the white flash starts) and until the code is injected(white flash ended). It's a bit unfortunate. As just injecting from Fenix side a dark html background-color and than after the First Contentful Paint removing it and hoping we were fast enough to inject our own CSS to take it over from there.

I think there should get some conversation between us and Fenix developers about how to solve this issue on a good and reliable way. As a fast white flash is very annoying, I self get it on my phone way too often.

Regards,
Gusted

[jenabaivab]

@Gusted I was about to contact the dark reader team on github, ha. Although, I think something has to be done from Fenix team as well regarding other pages. Like when the tab is switched, there is a flash, even though the page is loaded from before. Same with switching from the search tab to the main window. Minor things to tweak now for the perfect dark mode.

[Gusted]

even though the page is loaded from before.

Then it's probably out of memory and than it's technically not loaded into the memory anymore 🤷🏽‍♀️
Anyway, Firefox have contacted dark reader before and we are willing to implement fixes on our side too. So it will be hopefully fixed.

[jenabaivab]

Then it's probably out of memory and than it's technically not loaded into the memory anymore

I actually thought about this. I tried opening 3 tabs at the same time, and tried switching between them quickly in a matter of 30 seconds. Same result :/

Firefox have contacted dark reader before and we are willing to implement fixes on our side too.

That's awesome!

[andreicristianpetcu]

Pages don't seem to load now :( I need to open a new tab with the link. I'm also using new tab experience, if that matters.

[igalic]

I've experienced that, or something similar for a while now, where reusing a tab is pretty much impossible, and sometimes after closing a tab, the one underneath will revert to showing the contents of the closed tab

but, I'm pretty, and sure, those issues are unrelated

[andreicristianpetcu]

New finding! If I get a black tab like in my previous example and swipe left/right to switch tab and back again, I see the page content.

[opusforlife2]

Is Reader Mode part of this effort? There is always a white flash before a page loads in Reader mode (whether Dark or Sepia). If it is unrelated to this issue, I'll open a new one.

Edit: When going back from Reader Mode to the actual page, there is a long period where about:blank stays on screen before the page loads. This doesn't happen if you go back from one normal web page to another.

[B0pol]

There are still white flashes that happen a lot.

1. Go to a page
2. Open a link in a new tab
3. Close it by pressing the back button

Another one but is trickier, and maybe related to the dark reader & memory thing

1. Open a page
2. Leave fenix for few minutes
3. Open it again, white flash.

I will try to reproduce the second bug with a native dark website so that we can know if it is unrelated to darkreader

[jenabaivab]

Anybody seeing any improvements for the white flashes? I'm still getting them regularly when closing search windows or changing tabs and such.

[hwinnemoe]

Activating _Wait Until First Paint To Show Page Content_ causes a crash using the following STR: #13388.

[B0pol]

White flash is not gone when you open via a PWA, and also when you click on open with firefox nightly

[andreicristianpetcu]

https://github.com/mozilla-mobile/fenix/issues/13388

[opusforlife2]

@andreicristianpetcu Read two comments above yours.

[jenabaivab]

Anybody seeing any changes? Is it being worked on?
On my device, there is still a bright flash when switching pages. Like going from settings/search to opened pages.

[igalic]

I'm running

Nightly 200901 06:03 (Build #2015761331)
AC: 57.0.20200831130101, b70bef444
GV: 82.0a1-20200829091226
AS: 61.0.13

on OnePlus 5t, running OxygenOS 10

and i still see white flashes every time Firefox starts or loads a new page, and often when it reloads the same page, too

[Gusted]

As just injecting from Fenix side a dark html background-color and than after the First Contentful Paint removing it and hoping we were fast enough to inject our own CSS to take it over from there.

As a person of my promises(I felt the urge to do something about this when posting that comment), I finally got around had a better look at the code injecting a white-flash killer CSS and thought the best idea to just shove it up a bit, to not rely on anything other than 2 little checks to make sure no bugs happen. So it won't go down the road on waiting until it receives a signal from the background-script to send all the settings and data along and then do some calculations to get the right background-color. All that micro-code was probably the notice-able small split second white flash people commented about here.

To not make this comment any longer than necessary. Here is the PR about moving the white-flash killer CSS moving to one of the first code being executed into the page. As of this also a new release has been made 4.9.17. Which has been since of writing successful pushed into AMA 7 hours ago and should be available on Firefox Mobile. I hope this improves a lot from our side as well and reduce the white flash a lot(and the split-second white flash that was burning my eyes).

Have a nice day everyone!

Regards,
Gusted

[assist726]

@Gusted Thanks so much, can finally make the switch from Kiwi over to Firefox.

Also just noticed if the page is stuck loading it would appear dark on view but in the multi-tab manager it would still appear white. Doesn't particularly bother me but figured I would point it out

[jenabaivab]

@Gusted currently on the latest version. Both FF nightly and dark reader. Guess it needs a little more tuning.

[crisalis2]

Thanks for the work!

I noticed remaining flashes. (Latest nightly with the secret setting, latest Dark Reader)

Keyboard-related. Something similar happens sometimes when the urlbar autohides.

Reader view-related.

When quitting Firefox.

Search. This doesn't happen most of the time, but sometimes it does.

Same when loading pages in general: just now logging in on Github saw it. Most of the time there is no white when loading pages, though (it has improved a lot).

Edit:
Also, when going back to Firefox from another app, a white flash always appears. (Provided Firefox was displaying some web page, not just its home page interface)

The same when going back from Firefox's Settings menu. (Provided Firefox was displaying some web page, not just its home page interface)

Also when changing orientation while watching videos in fullscreen, and when existing fullscreen.

[Gusted]

Guess it needs a little more tuning.

Unfortunately I idd everything in power I can to get the css injected as wast as possible and the whole code itself should run under 16.66ms(1 animation/render frame)so its really a bit up to Firefox to probablyppolish the set initial color functionality and fast the the scripts get injected into the page and than bring executed. Something we can't control unfortunately.

[532910]

still not fixed in the last nightly

[Rushilotti]

I checked it on both beta and firefox nightly by downloading the latest dark reader addon.

Only the flashing happen when you loading something for the first time on a tab. After that every thing is dark. Even if you change the url in the same tab the dark background is there which is a good thing.

However if I change the tab the flash again occurs for the first load and remains dark after that whatever you are browsing.

Its a great step up from the previous every page white flash.

Thanks @Gusted for this.

May be firefox devs chip in and fix this even further I hope.

I can now switch from kiwi to newer firefox.

[532910]

Only the flashing happen when you loading something for the first time on a tab.

False.

[B0pol]

Did you enable « Wait Until First Paint To Show Page Content » in secret settings?

If you don't, there is no difference between stable and nightly version, I.e. no fixes

@532910 @jenabaivab

[532910]

secret settings

I see no secret settings, could you say, where they are?

[Rushilotti]

Only the flashing happen when you loading something for the first time on a tab.

False.

May be reinstall dark reader? I have no white flash after first page load.

[hwinnemoe]

@532910 Tap five times on the "Firefox Browser"-logo on _About Firefox Nightly_, then the _Secret Settings_ option becomes available via _Settings_. You have to do this every time you reboot your device or after you removed Fenix from your active apps.

[532910]

Still flashes white even with Wait Until First Paint To Show Page Content turned on and not when you loading something for the first time.

I see it always.

Hint to reproduce: make you internet connection slow.

[opusforlife2]

At least in the case of Reader Mode, I've noticed there is a period where the tab stays on about:blank, which is a blinding white regardless of your chosen Fenix theme. I wonder how much of a difference it would make if about:blank was made dark grey or black when Fenix is set to Dark theme. If this page acts as an interstitial in other situations as well, there could be improvements there too.

[jenabaivab]

Did you enable « Wait Until First Paint To Show Page Content » in secret settings?

If you don't, there is no difference between stable and nightly version, I.e. no fixes

@532910 @jenabaivab

Always has been enabled

[jenabaivab]

I think now it's on FF devs. Random flashes everywhere. Even when closing the settings page to resume browsing. A little more work from FF team should help iron out the remaining discrepancies.

[liuche]

Is this something that GV can do, to set the background depending on app theme? I would say this is a P2, it's a really annoying bug but isn't say, a crash.

[liuche]

Moved to bugzilla: https://bugzilla.mozilla.org/show_bug.cgi?id=1663732

[spphinslove]

I think this desktop version also has this problem.

[saschanaz]

@spphinslove What version are you using? AFAIK it has been showing gray screen instead recently.

[andreicristianpetcu]

@spphinslove does it happen with this theme also? https://addons.mozilla.org/en-US/firefox/addon/borderless-dark/ if yes, please report it on bugzilla and link it here

[hwinnemoe]

This is already reported by https://github.com/mozilla-mobile/fenix/issues/6313#issuecomment-689033972, it tracks both WebRender for Android as well as WebRender for desktop Nightly 83.

[spphinslove]

@spphinslove does it happen with this theme also? https://addons.mozilla.org/en-US/firefox/addon/borderless-dark/ if yes, please report it on bugzilla and link it here

I use this theme also white screen,it's a bug?
link is here:
https://bugzilla.mozilla.org/show_bug.cgi?id=1664837

[spphinslove]

@spphinslove What version are you using? AFAIK it has been showing gray screen instead recently.

80.0.1 x64

[linsui]

I can see white flash on PWA while it seems fixed in browser.

[igalic]

not for me, @linsui, I'm getting white flashes in both

[ShalokShalom]

All loading screens all white all the time with all dark themes.
Mobile and desktop.

[mbestavros]

@ekager Not sure if this is the right issue to report it, but --

I just updated to the latest Fenix Nightly:

Nightly 201024 17:01 (Build #2015771595)
AC: 64.0.20201023143136, d78abdf9f
GV: 84.0a1-20201022093646
AS: 63.0.0

The hidden pref to "Wait until first paint to show page content" seems to be gone in this build. My understanding from reading this issue and related Bugzilla issues is that this was eventually intended once a better fix had been implemented in GeckoView/Android Components etc. My hope was that meant the fix had made it to Nightly -- but unfortunately, I'm still noticing white flashes all over the place. Loading pages, opening new tabs (sometimes) -- it's happening in lots of places it didn't when the experimental feature was still available.

Just FYI, since it seems like there is work in this area happening right now.

[ekager]

Yes, this is expected we want to remove the hacks that the hidden pref was working around. Instead, we can now change the "clear color" of the engine, but there is still currently a short flash. One followup issue filed is https://github.com/mozilla-mobile/android-components/issues/8752

[LaurentiuApahideanSV]

Verified as fixed on Firefox Preview Nightly 201102 (Build #2015773227).

Devices used:

• Samsung Galaxy S9 (Android 8.0.0)
• OnePlus 6T (Android 9)

[crisalis2]

Shouldn't page color match Firefox's dark UI color? Right now they are two very different shades of gray.
Edit: Also, reader view's dark background is yet another shade of gray. Shouldn't all of them be the same color? Should I open another issue instead of commenting it here?

[opusforlife2]

My eyes thank you every day, @ekager.

[strugee]

@crisalis2 yes, open a new issue and reference this one in it.