Re: [css-d] FF3 FOUC

[David Hucklesby]

On Mon, 30 Jun 2008 12:13:46 +0100, Francois Jordaan wrote:
> Hi,
>
> On some sites, including one I'm working on, I've noticed a Flash of Unstyled 
> Content
> (FOUC) in FF3, which doesn't occur in any other browser. (This is where the 
> page
> content displays unstyled for a split second before the CSS kicks in.)
>
> The site I'm working on is not yet public, but here's another example:
> http://www.worthing.gov.uk/visiting-worthing/
>

Re: the delays people are reporting-- put the CSS high in the HEAD,
the JS low in the BODY. It would also help to gzip the CSS and JS
on account of the huge quantity of it. More you can do to improve
response here:

 

Cordially,
David
--

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] FF3 FOUC

[Ryan Doherty]

On Jun 30, 2008, at 5:30 AM, Philippe Wittenbergh wrote:

>
> On Jun 30, 2008, at 8:13 PM, Francois Jordaan wrote:
>
>> On some sites, including one I'm working on, I've noticed a Flash of
>> Unstyled Content (FOUC) in FF3, which doesn't occur in any other
>> browser.
>> (This is where the page content displays unstyled for a split second
>> before
>> the CSS kicks in.)
>>
>> The site I'm working on is not yet public, but here's another  
>> example:
>> http://www.worthing.gov.uk/visiting-worthing/
>>
>> Does anyone know what causes it?
>
> Safari 3 and WebKit nightly builds also show that FOUC.
> I guess, as Bill Brown suggest, that moving the block of stylesheets
> before the block of links for the js in the source code will help.
>
> Note that it takes a loong time before that site start displaying
> something. I waited at least 6 seconds staring at a blank screen (both
> Gecko and WebKit) – and that is on fast 'net connection.
>

This is because there are 13(!) javascript files being loaded before  
anything else. I recommend merging them all and putting them at the  
bottom of the page.

In fact, I recommend merging all the stylesheets too. This should  
increase performance too.

http://developer.yahoo.com/performance/


Ryan Doherty
[EMAIL PROTECTED]

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] FF3 FOUC

[Philippe Wittenbergh]

On Jun 30, 2008, at 8:13 PM, Francois Jordaan wrote:

> On some sites, including one I'm working on, I've noticed a Flash of
> Unstyled Content (FOUC) in FF3, which doesn't occur in any other  
> browser.
> (This is where the page content displays unstyled for a split second  
> before
> the CSS kicks in.)
>
> The site I'm working on is not yet public, but here's another example:
> http://www.worthing.gov.uk/visiting-worthing/
>
> Does anyone know what causes it?

Safari 3 and WebKit nightly builds also show that FOUC.
I guess, as Bill Brown suggest, that moving the block of stylesheets  
before the block of links for the js in the source code will help.

Note that it takes a loong time before that site start displaying  
something. I waited at least 6 seconds staring at a blank screen (both  
Gecko and WebKit) – and that is on fast 'net connection.

Philippe
---
Philippe Wittenbergh
http://l-c-n.com/





__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] FF3 FOUC

[David Laakso]

Francois Jordaan wrote:
> Hi,
>
> On some sites, including one I'm working on, I've noticed a Flash of
> Unstyled Content (FOUC) in FF3, which doesn't occur in any other browser.
> (This is where the page content displays unstyled for a split second before
> the CSS kicks in.)
>
> The site I'm working on is not yet public, but here's another example:
> http://www.worthing.gov.uk/visiting-worthing/
>
> Does anyone know what causes it?
>
> francois
>
>   





Get it on your page in Mac Safari, Camino, as well as FF/3.
Try validating the CSS; and, put all the script calls /beneath/ the last 
conditional comment.
Interesting article about FOUC:




-- 
http://chelseacreekstudio.com/

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] FF3 FOUC

[Bill Brown]

Francois Jordaan wrote:
> Hi,
> 
> On some sites, including one I'm working on, I've noticed a Flash of
> Unstyled Content (FOUC) in FF3, which doesn't occur in any other browser.
> (This is where the page content displays unstyled for a split second before
> the CSS kicks in.)
> 
> The site I'm working on is not yet public, but here's another example:
> http://www.worthing.gov.uk/visiting-worthing/
> 
> Does anyone know what causes it?
> 
> francois

Hi Francois,

When I moved your three style sheets above your javascript block, this
seemed to fix the fouc in ff3. Probably, only the content style sheet
needs to be moved (and maybe sidebar), but in keeping your source code
relatively consistent, I moved all three and it seemed to work fine.

Hope it helps.
Bill


-- 
/**
 * Bill Brown
 * TheHolierGrail.com & MacNimble.com
 * From dot concept...to dot com...since 1999.
 ***/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] FF3 FOUC

[Francois Jordaan]

Hi,

On some sites, including one I'm working on, I've noticed a Flash of
Unstyled Content (FOUC) in FF3, which doesn't occur in any other browser.
(This is where the page content displays unstyled for a split second before
the CSS kicks in.)

The site I'm working on is not yet public, but here's another example:
http://www.worthing.gov.uk/visiting-worthing/

Does anyone know what causes it?

francois

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/