Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

New tab flashes white when in Light mode #3575

Closed
btlechowski opened this issue Mar 5, 2019 · 10 comments · Fixed by brave/brave-core#2957
Closed

New tab flashes white when in Light mode #3575

btlechowski opened this issue Mar 5, 2019 · 10 comments · Fixed by brave/brave-core#2957

Comments

@btlechowski
Copy link

Follow up to #1876 and #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

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
Copy link

GeetaSarvadnya commented Mar 6, 2019

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

1876

@bsclifton
Copy link
Member

bsclifton commented Mar 7, 2019

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:

Also, per @rossmoody in brave/brave-core#1680 (comment):

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.

@rebron rebron added the priority/P4 Planned work. We expect to get to it "soon". label Mar 8, 2019
@chmln
Copy link

chmln commented May 30, 2019

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
Copy link

kartana commented May 30, 2019

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 rebron added priority/P3 The next thing for us to work on. It'll ride the trains. and removed priority/P4 Planned work. We expect to get to it "soon". labels May 31, 2019
@rebron
Copy link
Collaborator

rebron commented May 31, 2019

cc: @imptrx, @cezaraugusto Can you guys take a look? I bumped this one up in priority.
See brave/brave-core#1680 (comment)

@petemill
Copy link
Member

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
Copy link

imptrx commented Jul 15, 2019

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
Copy link
Member

petemill commented Jul 17, 2019

@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
Copy link
Member

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
Copy link
Author

btlechowski commented Sep 20, 2019

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 brave/brave-core#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.

3575 light
3575 dark

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 brave/brave-core#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 brave/brave-core#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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment