Prevent white screen before loading page in chromium?

Question

When a page doesn't load immediately, Chromium and every other browser I tried display a white screen before they get a response from it:

enter image description here

Even though chrome://settings/personal says it's using the GTK+ theme - in my case it's Darklooks, which has a dark background:

enter image description here

Is there a way to avoid this in Chromium? Or, if there isn't, is there a browser that does not have this "issue"?

For Firefox, you can change the value of `browser.display.background_color` to a darker color (#333). Also try adding `browser { background-color: #333 !important; }` and `tabbrowser tabpanels { background-color: #333 !important}` into `userChrome.css`. — Mateen Ulhaq, May 10 '14 at 05:46
this hack solved white flash for me. http://stackoverflow.com/questions/16243105/google-chrome-override-white-blank-page-between-webpage-loads — , Jul 16 '14 at 04:31
I simply installed the dark incognito theme https://chrome.google.com/webstore/detail/material-incognito-dark-t/ahifcnpnjgbadkjdhagpfjfkmlapfoel?hl=en this solved the issue for me: No white page on page load anymore! — wp78de, Mar 12 '19 at 03:01

score 16 · Answer 1 · answered May 11 '13 at 16:59

16

For Google Chrome and Chromium, you are probably a victim of Issue 1373: Navigating dark background websites results in blinding white flashes between pages.

There's a hack to minimize, but not totally eliminate, your misery described in comment 261:

As a temporary fix, I set the custom user stylesheet to render pages with a black background so that before it receives styling information from the website it renders the window black instead of white, and now it flashes black instead, which is much more bearable on the eyes until a permanent solution is made.

The hack involves adding the following lines to your Custom.css which is located in User Stylesheets in your Default folder. In my case, the path is ~/.config/chromium/Default/User Stylesheets.

html, body{
background-color:#000000; //This sets the background color to black
color:#0000FF; //This sets the text to blue, so you can read it on webpages set to use defaults; white is too hard on my eyes and if you dont put this it will be black on black
}

As for Firefox, I use the following code in userChrome.css located in ~/.mozilla/firefox/profile_name/chrome:

@namespace xul url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);

/*prevent white flash*/
tabbrowser tabpanels { background-color: #111 !important}

If the chrome folder doesn't exist, create it. Note that both chrome and userChrome.css are case-sensitive.

answered May 11 '13 at 16:59

2

Chromium solution did not work for me in 2015, but Firefox solution mostly does. Can't completely avoid flickering due to browsers incrementally loading pages. – holocronweaver Sep 20 '15 at 07:43
4

another hack by forking the source code here https://github.com/hbtlabs/chromium-white-flash-fix – hbt Dec 29 '16 at 18:52
1

firefox method does not work for me (ubuntu 18.04+ ffox 65.0.1) – wotter Feb 27 '19 at 23:29
What better works for me on Firefox 86 is `browser, .browserContainer { background-color: black !important; }` in `userChrome.css`. – AMS777 Mar 16 '21 at 18:13
It was that the html page I was loading in Wordpress, Elementor, where my slider is manually designed, was loading white. Your answer of putting black background to html did solve my problem fantastically. Thank you! – Mugé Jul 23 '21 at 14:14
all doesn't work on Firefox 91 – tinker Aug 31 '21 at 07:02
In 2015 Chrome dropped support for user style sheets: this recipe won't work for Chrome – kolypto Sep 05 '21 at 17:31

score 4 · Answer 2 · answered Jul 08 '16 at 23:33

As far as I know, all of the old methods that fixed this bug no longer work (in 2016). I came up with a solution today to overcome this issue and wrote about it some which is available here: http://jollo.org/LNT/public/chrome-white-flash.html .

It essentially makes use of an autohotkey script that paints the window onto itself until the next page has loaded, by-passing the period in which the window flashes.

score 2 · Accepted Answer · edited Mar 20 '17 at 10:04

2

Nice workaround vasa1, the white flashes are gone. But the background of some websites turns black, which is a bit ugly:

enter image description here

So I adapted that CSS and ended up with:

html:not(:hover), body:not(:hover){
    background-color:#000000;
}

This means that when the cursor is not over the page, the background is set to black - when you click on the new tab button, the cursor is not over the page, so a black background will flash instead of a white one. When you hover the cursor over the page (when you're reading it) the black background is then forgotten, and the website's one is used instead:

enter image description here

edited Mar 20 '17 at 10:04

Community

1

answered May 11 '13 at 17:31

Alex

2,036
4
22
33

Great! See if you can add it to the list of comments there (issue1373). I suspect you may not because they seem to have restricted comments: *Only users with EditIssue permission may comment.* :( – May 12 '13 at 02:21
And when I tested Midori (also WebKit) a year ago, it didn't flash white! I don't know how it is now. I left Midori because it wasn't as customizable and crashed (for me) or some important pages. – May 12 '13 at 02:24
1

this approach no longer works as of 2016 – ecoe Apr 23 '16 at 13:36

lacostenycoder · Answer 4 · 2017-01-30T01:29:12.107

UPDATE: I've changed my answer to use temporary dimming of screen as my previous solution was buggy and left the browser scroll state broken.

This solution uses an automator script set up as a service made available to Chrome and finally mapped to a keyboard shortcut in system. The simple solution was to just dim the screen about 5x worked for me but you might wanna play with that sending depending on your brightness. If you use a very dark setting for example, the screen my go completely blank for a second, but that still better than the blaring flash of white.

See https://gist.github.com/lacostenycoder/01108de10fe02e2f39d9cceb2457b895

on run {input, parameters}

    set the_application to (path to frontmost application as Unicode text)

  repeat 5 times
    tell application "System Events"
          key code 107
      end tell
  end repeat
  delay 1

    tell application "System Events"

    keystroke "t" using command down
    delay 1

    end tell
  delay 1 
  repeat 5 times
    tell application "System Events"
          key code 113
      end tell
  end repeat

    return input
end run

score 1 · Answer 5 · answered Aug 12 '20 at 17:44

1

Installing this Dask Theme eliminated the white screen flash for me on Windows 10. https://chrome.google.com/webstore/detail/macos-mojave-dark-mode/emoadoophllahfgbjaidlhjgnnmmdigh?hl=en

answered Aug 12 '20 at 17:44

Happy Town

119
5

1

amazing, this actually worked! can't believe noone mentioned this! – jeyko Mar 18 '21 at 20:43

score 0 · Answer 6 · edited May 23 '17 at 11:33

0

Nice one, it works on history. Best thing is to take the original code and change the text to a light color. The second code didn't work, here is one:

This page explains how to change the color flash using a JS

Chrome flashes black screen when using css transition rotate

edited May 23 '17 at 11:33

Community

1

answered Jan 22 '14 at 03:36

bandybabboon

276
4
13

2

I re-installed chrome and now the fix doesnt work anymore, i still have "user stylesheets/custom.css" file that worked previous to the install, but it's flashing white and history page is white again. anyone know why? – bandybabboon Mar 04 '14 at 02:39

score -1 · Answer 7 · answered Feb 14 '21 at 22:17

I found out that white flash appears only if the browser starts maximized. When started not maximized - there's no flash! So i've changed the shortcut startup properties to minimized and added these parameters: --window-position=-10,-15 --window-size=1700,1040

Prevent white screen before loading page in chromium?

7 Answers7

Linked

Related