CouchCMS Forum Bug Reporting and Troubleshooting
Problems, need help? Have a tip or advice? Post it here.
3 posts Page 1 of 1
Post a reply
Previous Next

blue text on page load

avatar
diverso
Registered User
hi there,

just wondering here about this issue as I can't pinpoint the problem, on my blog page when I load/refresh the page I can see all the text and elements turn blue for a second or two, wondering, can you please help me sort it out?

Please see the issue here: http://www.designdiverso.com/thoughts.php

I've also attached a screenshot

Attachments

Re: blue text on page load

avatar
KK
Moderator
Hi,

That seems to be the FOUC (Flash Of Unstyled Content) phenomenon in action.

Chrome dev-tool confirms this by clearly showing that the browser loads your HTML page in its entirety first before fetching any CSS.

This usually happens when one links the CSS files outside the <head> element.
In your case this is not so.
*However*, I did notice one thing in your code that could effectively be resulting in moving the CSS files outside the <head>.

Following is an excerpt of your code as it exists now -
Code: Select all
<head>
    ..

    <div id="fb-root"></div>
    <script>(function(d, s, id) {
      var js, fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) return;
      js = d.createElement(s); js.id = id;
      js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.3";
      fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));</script>
    ..

    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="dist/css/thoughts.2147483647.css" id="main-styles" />
    ..
</head>

You have placed the <div id="fb-root"></div> (and the JS that follows it) within the <head>.
This is causing the browser to close the <head> block *before* the CSS files get linked.

Regarding the div/code, according to Facebook -
You should insert it directly after the opening <body> tag on each page you want to load it:

So I think if you do just that it should help.
Let us know how it goes.

Re: blue text on page load

avatar
diverso
Registered User
thank you very much, that did it, issue is solved.

KK wrote: Hi,

That seems to be the FOUC (Flash Of Unstyled Content) phenomenon in action.

Chrome dev-tool confirms this by clearly showing that the browser loads your HTML page in its entirety first before fetching any CSS.

This usually happens when one links the CSS files outside the <head> element.
In your case this is not so.
*However*, I did notice one thing in your code that could effectively be resulting in moving the CSS files outside the <head>.

Following is an excerpt of your code as it exists now -
Code: Select all
<head>
    ..

    <div id="fb-root"></div>
    <script>(function(d, s, id) {
      var js, fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) return;
      js = d.createElement(s); js.id = id;
      js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.3";
      fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));</script>
    ..

    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="dist/css/thoughts.2147483647.css" id="main-styles" />
    ..
</head>

You have placed the <div id="fb-root"></div> (and the JS that follows it) within the <head>.
This is causing the browser to close the <head> block *before* the CSS files get linked.

Regarding the div/code, according to Facebook -
You should insert it directly after the opening <body> tag on each page you want to load it:

So I think if you do just that it should help.
Let us know how it goes.
Post a reply
Previous Next
3 posts Page 1 of 1
Return to Bug Reporting and Troubleshooting