Any way to avoid the "blank white" screen effect on page load?

Pathduck

I am coming from Firefox, and it appears FF does some background loading of the page before presenting it - while Vivaldi presents the user first with a blank white page before it presents the content.

And once you have noticed it, it's hard not to

Is there a setting to override this? Or at the very least, to change the color of this background which is presented before the content is loaded?

Ornorm

@pathduck You might want to upvote the following feature request

iAN CooG

I'm using a custom.js mod with this (among others)
https://github.com/Sporif/CustomHooks/blob/master/hooks/white-flash-fix.js

Pathduck

@ian-coog said in Any way to avoid the "blank white" screen effect on page load?:

I'm using a custom.js mod with this (among others)
https://github.com/Sporif/CustomHooks/blob/master/hooks/white-flash-fix.js

@Ornorm Voted and commented. Found something interesting maybe for the Vivaldi devs.

@iAN-CooG I'd love to test it, but exactly how would I do it?

iAN CooG

@pathduck said in Any way to avoid the "blank white" screen effect on page load?:

@iAN-CooG I'd love to test it, but exactly how would I do it?

you can use the python script in my signature (that mod is between the included ones) and/or follow the instructions in the modifications subforum
https://forum.vivaldi.net/category/52/modifications

Pathduck

@ian-coog said in [Any way to avoid the "blank white" screen effect on page load?]

you can use the python script in my signature (that mod is between the included ones) and/or follow the instructions in the modifications subforum
https://forum.vivaldi.net/category/52/modifications

OK I will give it a go. Will try the regular modding method first, your python script seems a bit 'daunting' to say the least

But I like the look of your site, something right out of the late 90s. C64 4ever!

I am afraid with Vivaldi after a while I will end up with a lot of these small fixes, and might have to try your complex script to survive after every update...

Pathduck

I just tried adding the white-flash-fix.js to browser.html. Can't really tell much difference to be honest.

To be clear, the issue seems to be constricted to loading pages from the Speed Dial, Bookmarks and History pages. Opening pages from the Bookmarks Panel or from using the Alt-B bookmarks are OK, as well as clicking links between domains from pages.

So maybe the Chromium fixes I refer to in the requests thread have also been implemented in Vivaldi. But it does not apply to opening links from the Speed Dial/Bookmarks/History and similar pages.

iAN CooG

@pathduck said in Any way to avoid the "blank white" screen effect on page load?:

I just tried adding the white-flash-fix.js to browser.html. Can't really tell much difference to be honest.

To be clear, the issue seems to be constricted to loading pages from the Speed Dial, Bookmarks and History pages. Opening pages from the Bookmarks Panel or from using the Alt-B bookmarks are OK, as well as clicking links between domains from pages.

So maybe the Chromium fixes I refer to in the requests thread have also been implemented in Vivaldi. But it does not apply to opening links from the Speed Dial/Bookmarks/History and similar pages.

seem like the mod assumes you're using a dark theme, normal light theme has bgcolor set to white...

try changing the line

				background-color: ${colorBg} !important;

to

				background-color: #000000 !important;

so the background will be always black

Pathduck

@iAN-CooG Nope, no change

I am in fact using a dark theme, background color #26272A which is dark grey.

I though the whole point of the colorBg value was to set it the current theme background? It still flashes when opening from the Speed Dial, Bookmarks and History. Which is where I open most pages from.

iAN CooG

@pathduck That's weird. I suspect you're not applying the patch correctly or at all.
Make sure browser.html ends like this

   <script src="bundle.js"></script>
   <script src="custom.js"></script>
  </body>
</html>

and custom.js in the same dir contains the content of the js you need.
But really, if you use my custom css restorer it should do the job for you. If you don't have python 2.7 installed you can use the compiled exes you find in my page under the script link.

Pathduck

~~Shouldn't scripts be loaded in the <head>?~~

EDIT: D'oh my bad - scripts go in the body, not the head
slaps forehead

It works now - you're a real lifesaver @iAN-CooG and thank you so much for persisting despite my boneheadedness

Begs the question though - if it really is as simple as getting the colorBg which would return the theme default background, and then applying it to the body of about:blank - why on earth are they just not implementing it???

Oh and EDIT2:
Appears to only work for opening pages from Speed Dial, not from Bookmarks or History. @iAN-CooG Can you check?

iAN CooG

@pathduck I always get a dark background if using any dark theme from history and bookmarks.
If it wasn't working for me I wouldn't be using it

Pathduck

@ian-coog said in Any way to avoid the "blank white" screen effect on page load?:

@pathduck I always get a dark background if using any dark theme from history and bookmarks.
If it wasn't working for me I wouldn't be using it

Hmm. You are talking about the Bookmarks Page (Ctrl+B) right - not the panel opened by F6? Because they behave differently.

I added the script to the end of browser.html like this:

	<script src="style/white-flash-fix.js"></script>
  </body>
</html>

Are you running other scripts that might set background-color?

iAN CooG

@pathduck said in Any way to avoid the "blank white" screen effect on page load?:

@ian-coog said in Any way to avoid the "blank white" screen effect on page load?:

@pathduck I always get a dark background if using any dark theme from history and bookmarks.
If it wasn't working for me I wouldn't be using it

Hmm. You are talking about the Bookmarks Page (Ctrl+B) right - not the panel opened by F6? Because they behave differently.

Both. I just retried opening links from the speed dial, bookmarks and history, then also from the side panels bookmarks and history, while at it also reopened some closed tabs from the trashcan. Everytime the empty page is black, until it starts rendering.

Are you running other scripts that might set background-color?

of course i have a dozen of css mods and a couple of js mods (you can see them in the zip), but none that i know of changes the color.

QuHno

I personally change \resources\vivaldi\style\common.css directly and add a background: color of my choice at the end of #webview-container {

CSS variables like var(--colorBg) work too and with some luck you find the right one that would even allow automatic switching between light and dark themes - some experimentation might be needed.

edit: Changed the path to the right one. /edit

Pathduck

@quhno said in Any way to avoid the "blank white" screen effect on page load?:

I personally change \resources\vivaldi\style\custom.css directly and add a background: color of my choice at the end of #webview-container {

CSS variables like var(--colorBg) work too and with some luck you find the right one that would even allow automatic switching between light and dark themes - some experimentation might be needed.

I added the following to my custom.css:

#webview-container {
	background: black;
}

Didn't seem to change anything

QuHno

@pathduck Darn! I should have copied the path and not typed it by hand.

It is not custom.css but common.css

Sorry about the mistake!

luetage

@quhno This should make no difference theoretically, because we run a custom.css file to change css that's in common.css. Maybe a simple !important! is all that's needed to make it work.

QuHno

@luetage It works for me without !important since before 1.6 up to the latest 2.x version after adding and restarting the browser. Don't know why it fails for others though.

luetage

@quhno Yeah, I just tested it. It works without !important and it works in the regular custom.css setup. Editing common.css isn't needed. Although this doesn't fix the white flash completely, because there are different layers in play. With this modification you get a white flash, then the edited color, then the website. One thing that can be done is editing browser.html and changing the background color of the body, which fixes things on startup, but it still isn't enough.

edit: seems like the background we are changing is already automated by Vivaldi. If you have a dark background theme it will be dark, if it's light it will be light. And the white flash I only get when starting up a page from speed dial. So nothing to do really.