Safari/WebKit background flash on page load

I was recently working on a website that had a black/dark background and while the typical suite of browsers that I test with seemed fine, Safari showed an annoying white flash when the page was loading.

Some research into this lead to a startling discovery as I personally consider this a bug in the Safari browser’s rendering. It’s often referred to as FOUC (Flash of Unstyled Content). There are several methods that I’ve seen, most employ JavaScript or ordering of CSS files to hide the <body> prior to the page completely loading.

The simplest fix, while not elegant, is to an explicit ‘style’ attribute on the <html> tag.

<html style=”background-color:black;”>

Reference:

Leave a Reply