Bug 10606 – FOUC: Flash of Unstyled Content

• Status: RESOLVED
• Resolution: FIXED
• Component: Page Loading

[Dan Richman]

I was able to find a simple JavaScript that activates the "Flash Of Unstyled Content" (FOUC) bug.

The FOUC bug only seems to happen when:

1. The script is used in conjunction with a large external stylesheet.
2. You must be looking at the page on a remote web server -- this bug cannot be reproduced when the files are local.

Here is the reduction:
http://level39.com/fouc/fouc.html

[Dan Richman]

The FOUC bug does not happen every single time the page is loaded.  You may have to hit reload two or three times to observe it.  

[Dan Richman]

Created attachment 10277 [details]
Files necessary to reproduce FOUC "Flash Of Unstyled Content" bug.

THIS BUG CANNOT BE REPRODUCED WHEN THE FILES ARE LOCAL. You must be looking at the page on a remote web server.

For an example, see: http://level39.com/fouc/fouc.html

Yep, script execution forces layout, and if stylesheets haven't finished loading you get a FOUC.

Dan, I saw that you commented on bug 9000. Is there any reason why this bug shouldn't be closed as a duplicate of bug 9000? I think it's the same (known) behavior in both cases.

[Dan Richman]

Bug 9000 was clearly marked as only being related to Wired.com.  I only had a hunch about bug 9000, and it's hard to say because it didn't provide any documentation or a reduction.  So, I'm not 100% sure why Wired.com has FOUC problems.  It is probably related to this bug, but I can't be sure.

The difference between this bug and Bug 9000 is that this bug has a reduction and clearly demonstrates that FOUC is a generic issue with Safari.  I think you'd be better off closing Bug 9000 and marking it as a duplicate of this bug (if that's doable).

[Dave Hyatt]

Fixed.

[David Kilzer (:ddkilzer)]

(In reply to comment #6)
> Fixed.

r16129