Brave-browser: New tab flashes white when in Light mode

[btlechowski]

Follow up to https://github.com/brave/brave-browser/issues/1876 and https://github.com/brave/brave-browser/issues/3362

Steps to Reproduce

1. Open chrome://settings/?search=Brave+colors
2. Change the color to Light
3. Open a few new tabs

Actual result:

White flash

Expected result:

No white flash

Reproduces how often:

Easily reproduced

Brave version (brave://version info)

Brave | 0.61.45 Chromium: 73.0.3683.39 (Official Build) beta (64-bit)
-- | --
Revision | cc53b0e12fcaf42e4bab8d6c23bd4fb7aae99f6c-refs/branch-heads/3683@{#413}
OS | Windows 7 Service Pack 1 Build 7601.24312

Brave | 0.62.16 Chromium: 73.0.3683.39 (Official Build) dev (64-bit)
-- | --
Revision | cc53b0e12fcaf42e4bab8d6c23bd4fb7aae99f6c-refs/branch-heads/3683@{#413}
OS | Windows 7 Service Pack 1 Build 7601.24312

cc @brave/legacy_qa @rossmoody

[GeetaSarvadnya]

The issue is reproducible in both White and Dark Theme on Linux - 0.61.46

Brave | 0.61.46 Chromium: 73.0.3683.39 (Official Build) beta (64-bit)
-- | --
Revision | cc53b0e12fcaf42e4bab8d6c23bd4fb7aae99f6c-refs/branch-heads/3683@{#413}
OS | Linux

[bsclifton]

If/when we have a fix for this, we'll want to make extra sure the fix works really well (especially if uplifting). There have been two rounds of fixes which were approved but ultimately didn't fix the problem:

• https://github.com/brave/brave-core/pull/1091
• https://github.com/brave/brave-core/pull/1680

Also, per @rossmoody in https://github.com/brave/brave-core/pull/1680#issuecomment-464131317:

After talking with @petemill, a more appropriate solve for this in the long run is to investigate setting the image itself as a background on the body. The grey background will help ease the initial load, but the jump issue will likely be fixed with that approach in some capacity.

[chmln]

Hey guys, thanks for all the work you do on Brave.

I know this is not a very high-priority issue but it's incredibly annoying - I think its not just limited to the new tab page. I use the Stylus extension to apply custom dark themes to websites and this bright white flash right before a dark theme is applied makes for really poor UX.

Maybe the browser can default to a dark color background if the dark theme is enabled in settings?

[kartana]

I know this is not a very high-priority issue but it's incredibly annoying

It's so annoying that I switched back to Firefox. I can not work like this at night. This needs fixing asap!

[rebron]

cc: @imptrx, @cezaraugusto Can you guys take a look? I bumped this one up in priority.
See https://github.com/brave/brave-core/pull/1680#issuecomment-464131317

[petemill]

I had started a WIP of setting the background image from a c++ data source instead of waiting for the react code to start. Happy to continue that or for someone to take over.

Though it does seem to be we need to clarify the goal as some are complaining of a white flash on tab-open in light theme mode, and some in dark theme mode?

The two methods we can use are:

• put the background on the body element
• decide which background source to use, and set it, as soon as possible (don’t wait for our slow front end code to load and make the decision).

I’m not sure those will solve all the stated issues but it should bring us in line with other NTP. I believe we already have a good default body bg color behind the image, but we should double-check.

[imptrx]

I played around with this issue on:

• Version 0.66.99 Chromium: 75.0.3770.100 (Official Build) (64-bit) (aka Release)
• macOS Mojave10.14.5

With default appearance settings here is what I see as the current behavior:

• the background color that "flashes" before NTP is loaded is consistent with the currently set theme (i.e. white on light mode and dark grey on dark mode)
• if you have a custom theme installed via the chrome web store, the background will be determined by the custom theme's set "default background color"

Unless this behavior is OS varying, I think the goal here is to make the default browser background black/dark grey on our native Light theme?

[petemill]

@imptrx if you have a moment, please test setting a dark background color directly on the .html file body (not via javascript) and see if that affects the flash of white color.

[petemill]

oh ignore that @imptrx just noticed there is a background-color. I suggest therefore that the fix is to keep the user's chosen light / dark initial background, and then fade in the image / gradient on top of it when it's ready.

[btlechowski]

Verification passed on

Brave | 0.69.128 Chromium: 77.0.3865.75 (Official Build) (64-bit)
-- | --
Revision | 201e747d032611c5f2785cae06e894cf85be7f8a-refs/branch-heads/3865@{#776}
OS | Ubuntu 18.04 LTS

Verified expected behavior outlined in https://github.com/brave/brave-core/pull/2957

• Dark background only when dark theme is active.
• Fade-in whole page when initial data is fetched.
• Fade-in image when load is complete, instead of having the image tear down the screen.

Verification passed on

Brave | 0.69.128 Chromium: 77.0.3865.75 (Official Build) (64-bit)
-- | --
Revision | 201e747d032611c5f2785cae06e894cf85be7f8a-refs/branch-heads/3865@{#776}
OS | Windows 10 OS Version 1803 (Build 17134.1006)

Verified expected behavior outlined in https://github.com/brave/brave-core/pull/2957

• Dark background only when dark theme is active.
• Fade-in whole page when initial data is fetched.
• Fade-in image when load is complete, instead of having the image tear down the screen.

Verified passed with

Brave | 0.69.129 Chromium: 77.0.3865.90 (Official Build) (64-bit)
-- | --
Revision | 58c425ba843df2918d9d4b409331972646c393dd-refs/branch-heads/3865@{#830}
OS | macOS Version 10.13.6 (Build 17G5019)

Verified expected behavior outlined in https://github.com/brave/brave-core/pull/2957

• per the PR this is expected: no more light-> dark flash, so the tab stays light until the image / gradient comes in
• Dark background only when dark theme is active.
• Fade-in whole page when initial data is fetched.
• Fade-in image when load is complete, instead of having the image tear down the screen.