Something I’ve noticed before and never found the time to address, is that when navigating between pages on a site using Google Chrome, there is a white flash before being taken to the page you’re navigating to. This seems to be the browser background which displays for a split second before it delivers the page in question, causing the annoying white flash. It’s more noticeable on darker websites.
So I was designing a new site with a dark blue background and when I was done, I was looking at it in the different browsers. When I got to Chrome, the white flash was absolutely horrendous. There was no way I was going to release a site with the potential for this happening with Chrome users. It basically destroys the entire user experience.
This time I was determined to find a solution. There are a bunch of forum posts about it and it’s apparent that it’s a universal problem. If you’ve run into this before, chances are you found a way around this from Googling about it, but I wanted to share a quick solution I found that works.
How to Get Rid of the White Flash in Chrome During Page Transitions
This solution goes against an important rule of CSS, but I was willing to break it just this once. It involves adding some inline styling to the <html> tag. And no, it doesn’t work when you simply add this to the css file. It has to be inline, and it has to appear is a specific place for it to work. Also, it’s worth noting that this will not validate and is considered invalid markup. I know, not good practice, but it get’s rid of the annoying white flash…This line needs to get added right after the DOCTYPE declaration:
<html style="background-color: #000000;">
So it would look like this:
<!DOCTYPE html> <html style="background-color: #000000;">
Substitute the color code with your ideal color based on the site’s predominant background color.
Now typically there is a language attribute included in the <html> tag, so you need to keep that there and add the inline style to it as well. So here’s the bad news…I don’t know of a legitimate way to add this to Thesis without breaking rules. You could use the custom doctype function to replace the existing doctype with itself and add the inline style to it, but the problem with that is you’ll end up with duplicate html tags.
If someone has a better solution for this, let us know in the comments, but the only way I can tell to get this done is by breaking a very important rule which I absolutely never break. And what I’m referring to is editing a core Thesis file. It is possible to achieve this result by editing a specific file and adding this line exactly where it needs to be. This would solve the problem, but of course, if you were to ever upgrade Thesis, this change would not be carried over to the new version. If the site in question were one of your own websites, then maybe you could make this change, but I really want to stress that editing core files is a big no no.
Anyway, if there’s a better solution out there, let us know in the comments.
I’d like to credit ‘thunberg’ for this who posted this solution here.
Was this post helpful? Consider subscribing to my blog via RSS or
Julie @SavvyEats (9)
Ammar Ali (7)
Kulwant Nagi (7)
anandy (6)
Amandeep Singh (5)
Dave (5)
Dr. Lawrence Kindo (5)
{ 3 comments… read them below or add one }
Thanks for writing up this tip. I’ve applied it to several dark sites I manage and it did help quite a bit. Unfortunately it didn’t work on the sites using full screen background images. Still, those sites are rare so this tip saved my bacon on several others.
thanks. i could not find a solution for this. this little code solved my problem.
Exactly what I needed, and it works! Thanks so much for posting this!!