I have a website (using PHP). The main background is of green color and content area is of white. While switching to one page to another (as it takes a few milliseconds) the background color gives a flash before the white takes it over. I think its because of the way the dom element being drawn/created. I tried using ob_start(); and ob_flush(); but not much of a help.
Is there any way to avoid this?
Thanks JJ
You might try explicitly setting a size (height and width) or min-height for the content area. You can also use a background image that has the white area. If your background is a solid color (or a horizontal gradient), you can use a 1px high gif that would be a very small file size. But you still might have a blink before the background loaded the first time.
Ultimately, I think users are used to seeing this. I don't think it's a big problem and wouldn't spend a lot of time trying to solve it. But maybe your boss disagrees.
Just a guess, but in your CSS, put the two rules in one CSS file, then the content area style declaration first, and make sure this CSS file loads before any others.
I don't know if it is the case, but I saw that to avoid the flickering problem of not stylized elements in IE, somebody added an empty script tag as
<script type="text/javascript">//This is necessary to avoid flickering of not stylized items in IE</script>
Google for "FOUC" or "flash of unstyled content" and you'll find many ways to prevent this.
I personally quite like the flash. It lets me know a new page has actually loaded. It’s feedback.
An old colleague introduced me to a little-known Internet Explorer <meta> tag... thing that lets you do, amongst other things, a fade transition between pages, e.g.
<meta http-equiv="Page-Enter" content="progid:DXImageTransform.Microsoft.Fade(Duration=2)">
<meta http-equiv="Page-Exit" content="progid:DXImageTransform.Microsoft.Fade(Duration=2)">
It’s IE-only.