Banging my head against this one.... Help would be great

Hodders

Hodders

Hodders

Soldato
Joined
18 Oct 2002
Posts
5,246
Location
Riding my bike
Working on a site:

www.bordercraft.co.uk

Using firefox (on two separate machines) the site occasionally comes up with most of the block formatting but no content. Most of the time a refresh fixes it.

The 'view source' shows that the content is there, it's just that firefox is not displaying it (even in plugins disabled mode)

Chrome/IE/Edge are all fine.

Validation doesn't throw up anything too horrible.

Its a wordpress site with the flexform template (updated).

Any help would be very gratefully received.

FAILS:

fail%20%28Small%29.JPG


WORKS:

works%20%28Small%29.JPG
 
Last edited:
I just had a poke around in FireBug and there's a wf-loading class that's added to your <html> element. When that's set the page is blank; if you remove it, content appears.

You have some code which adds this class on load then removes it after 3 seconds:

Code: 
var html = document.getElementsByTagName('html')[0];
html.className += '  wf-loading';
setTimeout(function() {
  html.className = html.className.replace(' wf-loading', '');
}, 3000);

Can you try just killing this entirely for now and seeing what happens? Don't see the point of waiting for 3 seconds anyway? Someone on a fast connection will have to be sat there for 3 seconds for no reason.

The other fix is that you're removing ' wf-loading' from the class. When I had it in firebug wf-loading was the first class, therefore there was no space before it, so the replace function wouldn't work.

E.g.:
class="wf-loading" won't match but class="someclass wf-loading" would.

Very very hacky but try this temporarily:
Code: 
setTimeout(function() {
  html.className = html.className.replace(' wf-loading', '');
  html.className = html.className.replace('wf-loading', '');
}, 3000);
 
Last edited:
Made the hacky change and sure enough after *about* 3 seconds the content pops up.

So it looks like you were bang on the money about the issue being that wf-loading was the 1st class.

The wf-loading class seems to be involved in the use of google fonts. I can see what the timeout function is doing, but I'm not sure why the classname needs to be removed after the timeout ? Is it in-case the font servers fail or the browser doesn't support them ?

Any suggestions as to a proper fix ?

I guess I could hard code in a base classname just to ensure the original replace code finds the ' wf-loading' search string....

The Problem seems to be that FF wasn't always triggering the timer which explains the intermittent nature of the problem.

Wierd and *many* thanks.
 
Ah I guess what it's doing is that it uses a normal fallback font (verdana, say) and then this gets replaced with the webkit font during load. If the page displays before the font has loaded the user would see the font change which would look weird.

wf-loading is removed because when that class is applied it effectively hides all the fonts/text on the page, it must be removed to show them again. As above it's basically giving the webkit fonts 3 seconds to load, if they fail to load after 3 seconds it'll just fallback to your standard browser font I guess.

I've never used it but a better fix may be to use something like webfontloader which was apparently written in collaboration with Google. This lets you load in your fonts using this library and it automatically deals with adding/removing the wf-loading class for you, so you could rip out your existing code. It's better than having a static 3 second wait too.
 
You must log in or register to reply here.
Back
Top Bottom