Google-chrome – Prevent white screen before loading page in chromium

chromiumgoogle-chrome

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"?

Best Answer

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.

On Windows

C:\Users\Username\AppData\Local\Google\Chrome\User Data\Default\User StyleSheets\Custom.css

On OSX

~/Library/Application Support/Google/Chrome/Default/User StyleSheets/Custom.css

On Ubuntu

~/.config/chromium/Default/User StyleSheets/Custom.css

If it doesn't exist yet, create it.

If you simply put the following CSS into it:

#card-slider-frame {
  background : black;
  color      : white !important;
}

Your New Tab page will look more like this:

enter image description here

I also found the suggestion to create an extension that controls the theme of the new tab page. This might be more reliable, as the Custom.css styles are applied to all internal and external pages.

Google-chrome – Chrome HTML5 notifications displaying white font on white background

Only WebKit browsers allow styling of validation bubbles using the -webkit-validation-bubble* CSS styles.

However, since Chrome moved away from WebKit to Blink, this was removed.
See for example Issue 259050: ::-webkit-validation-bubble stopped working in Chrome Blink.

Your only option now is to override the general validation bubble mechanism and issue your own message.

In a form, you can use the novalidate attribute and do your own client-side validation in the Submit button:

HTML

<form novalidate> ... </form>

JavaScript

var forms = document.getElementsByTagName('form');
for (var i = 0; i < forms.length; i++) {
    forms[i].addEventListener('invalid', function(e) {
        e.preventDefault();
        //Possibly implement your own here.
    }, true);
}

A nice article about form validation is Constraint Validation: Native Client Side Validation for Web Forms.

Best Answer

Related Solutions

Google-chrome – Hack Chrome to show its internal pages with black background

On Windows

On OSX

On Ubuntu

Google-chrome – Chrome HTML5 notifications displaying white font on white background

Related Question