Why does daringfireball show a "white flash" between pages?
March 13, 2013 2:19 PM   Subscribe

I've noticed that when I click around the popular Daring Fireball site, there's a brief whitescreen flash in between pages... i.e., the entire browser window turns white for just a moment before the next page loads. Anyone know why?

Strangely enough, it only happens if I move the mouse after clicking the link; if I leave the mouse still, there's no white flash. This happens in Safari and Chrome.

I ask because I'm developing a site that is displaying the same behavior, and I'm wondering if anyone knows a fix. Most sites don't have this problem, but Daring Fireball and a couple of others do.
posted by mark7570 to Computers & Internet (8 answers total) 2 users marked this as a favorite
I wonder if they have set their overall background color to white, but then used tables or frames to cover up the white, or something like that?

So the browser sets the background color, and then executes the rest of the code which paints the frame gray?
posted by musofire at 2:33 PM on March 13, 2013

Sounds like the flash of unstyled content, a known webkit issue.
posted by O9scar at 2:39 PM on March 13, 2013 [1 favorite]

Seconding O9scar. This old wiki entry on FOUC in Opera has this tidbit: However, if you mouse over the document it has to reflow immediately, so if you move your mouse around in the document window while downloading, it's going to have to reflow as many times as you move your mouse (could be 50+ times per second).

So maybe you're seeing something similar in Webkit, where moving the mouse forces the page to reflow/rerender before all the CSS has loaded, so you see white.
posted by zsazsa at 2:48 PM on March 13, 2013

It's not actually the FOUC; if it were the FOUC you'd see unstyled text.

The flash is dependent on how quickly the page is delivered and how quickly the browser can render it.

If I click up and down Daring Fireball's nav links, sometimes I get the flash and sometimes I don't. It isn't consistent w/r/t any movement of my mouse, and it isn't consistent per-page-linked-to — but that said, pages with a lot of content show the flash more often that pages with very little content.
posted by o2b at 2:57 PM on March 13, 2013

Do you have the same issue if you embed your CSS rather than linking to it in a separate document?

(And to add a data point...I don't see this at all in Firefox, which does point to the possibility that it's a WebKit thing.)
posted by bcwinters at 3:09 PM on March 13, 2013

o2b: I only get the flash if I move the mouse immediately after clicking any link in the nav. No mouse movement, no flash. It's very consistent. I'm using the latest Chrome.
posted by zsazsa at 3:10 PM on March 13, 2013 [1 favorite]

o2b: I only get the flash if I move the mouse immediately after clicking any link in the nav. No mouse movement, no flash. It's very consistent. I'm using the latest Chrome.

posted by milestogo at 7:08 PM on March 13, 2013

Mac / Chrome. I can't replicate this behavior. Looking at a few sites with dark backgrounds, this "flash" seems merely to be the empty Chrome window between pages. I think you merely notice it because the site is dark. I'd be happy to be proven wrong, but I can't find a dark site that does not exhibit this behavior, no matter what mouse movement.

Additionally you need to consider whether your cache is cleared between page loaded. It's possible some of the differences are related to your browser having already cached and page's html and rendering faster than your eye can see - no network delay because it pulls from cache.

Speaking of cache -- one thing you could do is "encourage" the browser to pre-fetch pages. But this is rather tricky and inconsistently supported, you might want to read the caveats at: How can I preload a page using HTML5?.

Another idea, wonder if you see a different behavior if you include the dark back background color inline in the html. So include it as <body style="background-color: #000;color: #fff;"> or the even older and deprecated <body bgcolor="#000000" text="#ffffff">
posted by artlung at 7:26 PM on March 13, 2013

« Older Help me calm anxiety about travel to China.   |   Movin' on up - How can I quickly raise my credit... Newer »
This thread is closed to new comments.