White Flash


  Page 1 of 2 Next Last 
Author Message
Abland

Posted: 7/13/2011
Quote message 

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! :-D

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

Posted: 7/13/2011
Quote message 

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

Posted: 7/13/2011
Quote message 

Interesting -- I tried this and it <em>caused</em> my site to flash!

Ian
 
Mr Parrot

Posted: 7/13/2011
Quote message 

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

Posted: 7/13/2011
Quote message 

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

Posted: 7/13/2011
Quote message 

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

Posted: 7/13/2011
Quote message 

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

Posted: 7/13/2011
Quote message 

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

Posted: 7/13/2011
Quote message 

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

Posted: 7/13/2011
Quote message 

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

Posted: 7/13/2011
Quote message 

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

Posted: 7/13/2011
Quote message 

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

Posted: 7/13/2011
Quote message 

It seems to be recognized fine using the FireBug plugin.

PITA is an understatement.

-Kel
 
Clippy

Posted: 7/13/2011
Quote message 

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

Posted: 7/13/2011
Quote message 

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

Posted: 7/13/2011
Quote message 

Wow. It really does work. That's insane (yet amazing)!
 
Digital Raindrops

Posted: 7/14/2011
Quote message 

Thanks for this, I have shared and posted it back over on the WordPress forum, with a credit to this topic.

David 8-)
 
Digital Raindrops

Posted: 7/14/2011
Quote message 

Now complete with link!
http://wordpress.org/support/topic/how-to-fix-the-flash-on-page-load-32x?replies=1#post-2221393

David :-D
 
Kelley

Posted: 7/14/2011
Quote message 

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

Posted: 7/14/2011
Quote message 

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

Posted: 7/14/2011
Quote message 

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

Posted: 7/14/2011
Quote message 

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

Posted: 7/14/2011
Quote message 

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

Posted: 7/14/2011
Quote message 

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

Posted: 7/14/2011
Quote message 

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

Posted: 7/14/2011
Quote message 

I only have the issue with IE! And thanks for the catch on my typo.

 
Digital Raindrops

Posted: 7/14/2011
Quote message 

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

Posted: 7/14/2011
Quote message 

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

Posted: 7/14/2011
Quote message 

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

Posted: 7/14/2011
Quote message 

Note, I had the correct print.css code in my site!

<link rel="stylesheet" type="text/css" media="print" href="/print.css" />
 
  Page 1 of 2 Next Last