Abland
|
http://www.artisteer.com/?post_id=168835&p=forum_post&forum_id=13
Quote Roger:Well looks like I'm invisible. So I won't bother to tell you the solution. Thanks for nothing guys. Well at least I was able to fix it. Good luck with only Abland helping you. So rude.
http://www.artisteer.com/?responsesPage=2&post_id=168835&p=forum_post&forum_id=13
Quote Roger:Okay then here's a hint.
It's called. "Flash of Unstyled Content"
Quote Abland:And "Flash of Unstyled Content" is just that - content before the style. Kelley's site has the issue of no content - white flash.
Hi, Roger,
I must apologize, I was wrong - your hint was in the correct direction. The fix was one targeted at "Flash of Unstyled Content".
Hat's off to Kelley!
http://wordpress.org/support/topic/ie-page-flashing-white-when-loading
Adding to header.php within the <head></head>:
<link rel="stylesheet" type="text/css" media="print" href="print.css">{/code]
It's working in every site I've updated so far.
|
|
Abland
|
I mean:
Adding to header.php within the <head></head>:
<link rel="stylesheet" type="text/css" media="print" href="print.css">
It's working in every site I've updated so far.
|
|
Mr Parrot
|
Interesting -- I tried this and it <em>caused</em> my site to flash!
Ian
|
|
Mr Parrot
|
Missed the code buttons in my last message!!
But has anyone noticed if WP 3.2.1 has resolved this issue? I don't seem to be experiencing the flashes as much.
Ian
|
|
Bud
|
That works but if you look in your error log you'll see a 404 error every time the file is loaded.
So you need to at least include a blank file for the system to load.
This would probably be better...
<link rel="stylesheet" type="text/css" media="print" href="<?php bloginfo('template_url'); ?>/print.css">
Then create a blank file called print.css in your theme root so at least the server has something to load without generating an error.
I guess now I have something else to add to the next version.
Bud
thetemplateer.com
|
|
Abland
|
Hi Mr Parrot,
Not sure if this helps, but I added right after:
<!--[if IE 7]><link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/style.ie7.css" type="text/css" media="screen" /><![endif]-->
and included a proper closing: (I neglected that in my post above)
<link rel="stylesheet" type="text/css" media="print" href="print.css" />
|
|
bud
|
Something else I just thought of and haven't had time to try is to change the media type in the original stylesheet link from 'screen' to 'all'
|
|
Abland
|
Hi, Bud,
I tried including the <?php ... ?> in the href but then every page went to white flash. But I'm finding my fixed sites so far as "it ain't broke (now) so why fix it?"
I did follow up on ensuring there was at least a blank print.css to be found as a relative url.
|
|
Kelley
|
Hi Bud,
I tried both of your suggestestions above; both resulted in the Flash occuring again.
I did create a print.css and it resides in the root of the theme directory, but I just called it like so:
<link rel="stylesheet" type="text/css" media="print" href="print.css" />
No reference to the template_url.
Will that still generate an error in the logs?
-Kel
|
|
Bud
|
Without the template path WP will look in your site root not your template root. So the system will still log a 404 error unless it was to find a print.css in the site root. Probably not the purest idea by WP standards.
The twentyeleven theme uses media"all" instead of media "screen". That might be the way to go.
Bud
thetemplateer.com
|
|
Kelley
|
I tried the media "all" and it flashed.
If I stick the print.css in the root (meaning where the wp-files live), will that take care of the error log? I know this is not pure, but that darn "flash" has been my nemesis for some time and I'm so pleased not to see it's ugly face for this moment in time.
P.S. Loving my templateer. So many cool things to add to site -- the FAQ tools has been pretty handy of late and it's easy for the client to implement.
|
|
Bud
|
Putting it in the site root should work. I would agree with Abland to just leave it but then your error log would be loaded with 404 errors. One for every time any page is loaded.
This site flash thing is a real PITA.
If you have the web developer plugin for FF you can check to see if the CSS file is loaded. The content should be blank. If it's not loading it will show the source for your site instead.
Bud
thetemplateer.com
|
|
Kelley
|
It seems to be recognized fine using the FireBug plugin.
PITA is an understatement.
-Kel
|
|
Clippy
|
Oh wow. I feel like I should have figured this out earlier. Oh effing wow.
I've not yet conducted any "white flash" tests, but I'll be sure to try this.
|
|
Clippy
|
Actually, I don't understand why this would work... Artisteer WordPress themes will already contain the link element in the header by default, so...
What difference would this make? Why does this work?
|
|
Clippy
|
Wow. It really does work. That's insane (yet amazing)!
|
|
Digital Raindrops
|
Thanks for this, I have shared and posted it back over on the WordPress forum, with a credit to this topic.
David
|
|
Digital Raindrops
|
Now complete with link!
http://wordpress.org/support/topic/how-to-fix-the-flash-on-page-load-32x?replies=1#post-2221393
David
|
|
Kelley
|
David -- My and Abland's experience is that the call to the style sheet must be like this (at least for themes other than Twenty 10/11):
<link rel="stylesheet" type="text/css" media="print" href="print.css" />
vs
<link rel="stylesheet" type="text/css" media="print" href="<?php bloginfo('template_url'); ?>/print.css">
and the empty print.css goes in the root of the directory (vs. theme) to avoid the 404 error hits.
Have you had a different experience?
So happy to have this trick in our back pocket until something better comes along!
|
|
Digital Raindrops
|
Hi Kelley,
I will have another test over the weekend, it did not make any difference to my theme.
In the root or the theme folder did not seem to make a difference to me, and I used href="<?php echo get_stylesheet_directory_uri() .'/print.css'; ?>" and not href="<?php bloginfo('template_url'); ?>/print.css"
I will see if anyone comments and revisit it later, my site is not the best example for testing.
Regards
David
|
|
Abland
|
Hi,
Instead of using the <?php ?> in the print.css href I tried the exact url to that file to avoid the 404, and it white flashed again.
I'm beginning to think that the call in the header.php - and NOT finding the file - is what has fixed this white flash. I'll look further into this but would like to hear what others might discover.
|
|
Kelley
|
I used this "fix" on this now live site (placeholder copy at the moment):
www.handwritingart.com
I put the emtpy style sheet in the root of the directory (with the wp-admin type files).
No flashing and I don't believe an error is logged as it finds this file OK.
I did try to put back some of my favorite plugins (like wp-spam-free) and that caused the site to go back to flashing. Thus, there are still issues with plugins that are not up-to-date.
And if using the Contact7 plugin, I still call the script only on the page needed, as you (Abland) pointed out.
As an aside, if you use Contact7 on a site hosted with GoDaddy, I feel your pain. Took me a few hours to get that working...ping me if you need further info.
On a couple of older (2.5) sites, they still flash, even with this tweak. Fortunately, they are demo sites that I can recreate when I have time.
|
|
Clippy
|
Quote Abland:I'm beginning to think that the call in the header.php - and NOT finding the file - is what has fixed this white flash. I'll look further into this but would like to hear what others might discover.
Confirmed.
Hahaha, back to square one...
|
|
Digital Raindrops
|
Hi Kelley,
Checked in FF and the link is not loading the print.css you are missing the / in '/print.css'
This will load the file ok!
<link rel="stylesheet" type="text/css" media="print" href="/print.css" />
I am begining to think that it is a browser problem with Internet Explorer.
I tested my website with IE vs FF, and Firefox loaded the initial part before anything else is loaded in half the time 0.4 vs 0.8, Firefox was a second faster overall.
Compare the first lines.
Internet Explorer:
http://tools.pingdom.com/fpt/?url=http://digitalraindrops.net/&id=5136217>
FireFox
http://tools.pingdom.com/fpt/?url=http://digitalraindrops.net/&id=5136322
David
|
|
Clippy
|
Quote Digital Raindrops:
I am begining to think that it is a browser problem with Internet Explorer.
I was just about to post that!
|
|
Kelley
|
I only have the issue with IE! And thanks for the catch on my typo.
|
|
Digital Raindrops
|
Someone just updated another topic on the WordPress forum, the devs are aware of this issue.
I have been testing on a twenty ten based theme, local host, disabled all plugins.
Loaded the page no flash, one wordpress /js/ script line.
<script type='text/javascript' src='http://localhost/wordpress32/wp-includes/js/l10n.js?ver=20101110'></script>
I then activated Google Fonts, flash on the first call to the script, then no flash on any page or post.
Activating a plugin that calls and fetches the scripts from the wordpress and the plugin folder, and I get the flash on some pages and posts.
Looking at the page source and we have these to lines calling wordpress /js/ scripts, are these conflicting or am I just off base.
What I do know that it only takes IE and one plugin that uses jQuery to cause this on my local install.
<script type='text/javascript' src='http://localhost/wordpress32/wp-includes/js/l10n.js?ver=20101110'></script>
<script type='text/javascript' src='http://localhost/wordpress32/wp-includes/js/jquery/jquery.js?ver=1.6.1'></script>
Disabled the plugin and added adsense and like button code no flash!
This is only a problem with <b>Internet Explorer</b> other browsers are ok!
I am only starting to look at jquery, so do not have the skills to say this is the reason.
HTH
David
|
|
Digital Raindrops
|
Can someone with a test site, remark this line in header.php and see if it helps, and if the sidebar Vmenu still works.
I do not have a local Artisteer theme with this problem, I am pretty sure it is a js problem.
wp_enqueue_script('jquery');
// remarked wp_enqueue_script('jquery');
David
|
|
Kelley
|
I've added your code to my test site here, but I don't have a vertical menu:
http://www.gfs.web-eze.com/
I removed the following just for comparison:
<link rel="stylesheet" type="text/css" media="print" href="print.css" />
Funny, earlier today this site was not flashing at all, then I upgraded WP and now it flashes (though not as much with your tweak).
Note that your fix disables the sticky footer/100% height.
|
|
Kelley
|
Note, I had the correct print.css code in my site!
<link rel="stylesheet" type="text/css" media="print" href="/print.css" />
|
|