WordPress turns white or flashes white for a second because of latency. I have not seen this issue with any local installations. One of the culprits seems to be that jQuery is being loaded by multiple plugins, each using a different version in most cases. There also appears to be several plugins that can cause this as well.
After some frustration and searching the internet exhaustively for an answer to this issue, I came up with an extremely simple yet acceptable (imo) workaround until we can get it completely solved.
The solutions I ran accross range from calling an empty script tag just before your call to your style sheet.
Like this -
<script type=”text/javascript”>
</script>
To calling a blank style sheet for print media
Like this -
<link rel=”stylesheet” type=”text/css” media=”print” href=”print.css” />
To downgrading your jQuery version to 1.4.4
Like this -
// Downgrade to jQuery 1.4.4 in order to support jQuery Tools
function downgrade_jquery() {
global $wp_scripts;// We want to use version 1.4.4 of jQuery, but it may break something in the admin so we only load it on the actual site.
if ( !is_admin() ) :
wp_deregister_script(‘jquery’);
wp_register_script(‘jquery’, ‘http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js’, false, ’1.4.4′);
endif;
}
add_action( ‘wp_head’, downgrade_jquery() );
But none of these solutions worked for us. So until a better solution reveals itself, here’s what we did. I hope this helps.
The Workaround
1) Create a tag in your style sheet for the HTML element.
2) Add the attributes from your body tag, like your background image and or your background color.
Like this -
html {
background-color: #ddd;
background-image: url(images/bg.jpg);
}
That’s it. Hit refresh! This workaround even works in Chrome but of course it seems to work best in FireFox.
Thank you! Something that actually works! I tried adding a background color to the body tag but that didn’t do anything. I moved the background image from the body tag and into the html tag and booyah! There it is.
Wow that was fast. We just launched this blog yesterday. I had a feeling this would be a useful workaround. You are indeed welcome Rick. Check back soon, we are still working on a solution.
Great blog! I am having the same issues with the white flashes between page loads.. I’m very new at WP.. what do you mean when you refer to “the html element”? Thank you in advance!
Hi Naomi,
You’re welcome. Thanks for the post.
In your style.css, create an entry for HTML.
Like this -
HTML {
background-color:#000;
background-image: url(images/background.jpg);
}
The above code would set the background to black and attempt to load background.jpg from the theme’s images directory.
The HTML element loads before any other page element, like the body. So although the “blink” remains, it’s almost unnoticeable because the HTML element’s background color is set to the same color as the body’s background color.
Cool it actually worked!!! Thanks a lot for taking the time to answer my question! I’ve been so annoyed with this glitch for weeks and weeks now and could NOT find an answer until now!
Dang Mike, you never cease to amaze me. Keep up the great work I hope you are doing well.
All is well indeed Wes! Thanks for stopping by.
Thanks for the post! It saved me quite a bit of time
Hello! Just want to say thank you for this interesting article! =) Peace, Joy.
THANK YOU! I’ve been frustrated with this issue for months. It worked perfectly in Firefox, but not Safari. Still have a brief flash of white. Thoughts?
Which version of WordPress and Safari are you using? I’ll try testing with the same config.
Mike,
We have tried doing the modifications you suggested, but on chrome it still doesn’t seem to be working. I have a couple of questions about how to edit Style.
Arras Style.css
/* Default Stylesheet */
@import url(‘css/default.css’);
/* User Override Stylesheet */
@import url(‘user.css’);
Is what is listed in the parent theme, Arras, but we have another one set up called child of Arras that has this in it’s Style.css
@import url(‘../arras/style.css’);
A couple of things I have noticed is that the default.css is actually listed in css/styles/default.css and not in css/default.css
Here are my questions. Does that affect how everything is being called? And where would I add the line to make the HTML tag load the background images? I have been playing around and can’t seem to get the background to stop flashing white, at least in chrome. It does work sometimes in Firefox and IE.
Thanks,
Hi Brad,
With child themes, typically any class that you write should overwrite the parent class, so I would just add an HTML tag in your child theme’s .css file. So in style.css
Write a rule for the HTML tag and define the attributes as needed..
HTML {
background-image: url (images/somecoolimage.png);
background-color: #dadada;
}
nice 2 rows
i needed to delete background: transparent; from the html tag and then it worked good in chrome especially…would be nice now with a fade effect
regards
Deniz
Outstanding! Thank for the post Deniz!
with this code u can center an image:
HTML {
width:100%;
height:100%;
background: black url(images/logo-login.png) center center no-repeat;
}
cheers
Deniz
glad to help you Mike
thanks to all guys here fighting for good quality crossbrowser output
regards
Deniz