Closed Bug 560232 Opened 14 years ago Closed 7 years ago

Flash of Unstyled Content (FOUC)

Categories

(Firefox :: General, defect)

Product:
Firefox
Component:
General
Platform:
x86
Windows XP
Type:
defect
Priority:
Not set
Severity:
normal

Tracking

()

Status:
RESOLVED WORKSFORME

People

(Reporter: fionnseachdelochielle, Unassigned)

References

(
URL
)

Details

(Whiteboard: [CLOSEME 2011-1-30]) 

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9.2.3) Gecko/20100401 Firefox/3.6.3 GTB7.0 (.NET CLR 3.5.30729)
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9.2.3) Gecko/20100401 Firefox/3.6.3 GTB7.0 (.NET CLR 3.5.30729)

This was a problem back in the days of IE5 when sites used CSS @import to hide CSS-styles from non-compliant web browsers. While the problem was originally limited to sites that used either @import or did not use the LINK or STYLE header elements, this occurrence is happening with just about any page that uses CSS. 

The URL I listed for this report is not the only page where this behavior shows up. http://www.bluerobot.com/web/css/fouc.asp/ is another page.

Reproducible: Sometimes

Steps to Reproduce:
1. Delete cache/Offline Storage
2. Load either page listed in this report
3. Watch for the flash of unstyled content.
Actual Results:  
Unstyled content is visible for a number of seconds (actual time varies for different network setups - i.e. wireless connections vs. wired, etc.)

Expected Results:  
No flash of unstyled content is the desired response.
Not a problem for me using Firefox 3.6.3 and the trunk, on Windows XP. I did see it in Explorer 8 however. I'm using a 802.11g Wifi network over a 6Mbps ADSL connection, which is an average connection here in Europe.

The URL in the URL-field was the slowest, and the background image was always the load one to load (with its own flash, but that's not a FOUC). But it was nothing special, just like most websites.
Reporter, are you still seeing this issue with Firefox 3.6.13 or later in safe mode? If not, please close. These links can help you in your testing.
http://support.mozilla.com/kb/Safe+Mode
http://support.mozilla.com/kb/Managing+profiles

You can also try to reproduce in Firefox 4 Beta 8 or later, there are many improvements in the new version, http://www.mozilla.com/en-US/firefox/all-beta.html
Whiteboard: [CLOSEME 2011-1-30]
Actually, I'm now using/testing FF4 beta 8 and still seeing the FOUC on various pages. One of the pages this happened with was for the "Firefox Updated" page. I haven't received any complaints, but have also seen it on more than one computer (ruling out a peculiarity of any one computer).
I'm currently seeing it only on websites that are use downloadable fonts, like <http://html5test.com/>. But that's more or less on purpose. IE doesn't do it like that, but it's also a lot slower as a result.
No reply, INCOMPLETE. Please retest with Firefox 3.6.13 or later and a new profile (http://support.mozilla.com/kb/Managing+profiles). If you continue to see this issue with the newest firefox and a new profile, then please comment on this bug.
Status: UNCONFIRMED → RESOLVED
Closed: 13 years ago
Resolution: --- → INCOMPLETE
SInce I've been testing FF4B8-10, I've only noticed the FOUC once (under 4b8). Once FF 4 is released, I don't think this will be a problem any longer.

Judith
Resolution: INCOMPLETE → WORKSFORME
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.12; rv:57.0) Gecko/20100101 Firefox/57.0

As of September 2017, this is still a bug with Firefox 57 Beta.

Steps to recreate this:

1. Go to any site that does not have any `<script> elements inside of `<head>.
2. Go to Responsive Design Mode by pressing command-option-M (on Mac)
3. At the top of Responsive Design Mode, change "No Throttling" to a low bandwidth like 2G or GPRS
4. Load or reload a website

At this point, you will see FOUC for a short period of time before the styling fixes it. At regular speeds, the flash of content is more like a blip. However, at lower bandwidth, and with media such as large SVG images, you will see a noticeable flash of this SVG and content.
[Tracking Requested - why for this release]:
status-firefox55: --- → affected
status-firefox56: --- → affected
status-firefox57: --- → affected
status-firefox58: --- → affected
status-firefox-esr52: --- → affected
tracking-firefox57: --- → ?
Hi Ryan, I thought I'd ping you since this has to do with RDM. Would you help investigate? If this is something that won't get fixed in 57 (I doubt it will), please go ahead and mark the status to wontfix for 57. Thanks!
Flags: needinfo?(jryans)
Status: RESOLVED → REOPENED
Ever confirmed: true
Resolution: WORKSFORME → ---
(In reply to Micah from comment #7)
> As of September 2017, this is still a bug with Firefox 57 Beta.
> 
> Steps to recreate this:
> 
> 1. Go to any site that does not have any `<script> elements inside of
> `<head>.
> 2. Go to Responsive Design Mode by pressing command-option-M (on Mac)
> 3. At the top of Responsive Design Mode, change "No Throttling" to a low
> bandwidth like 2G or GPRS
> 4. Load or reload a website
> 
> At this point, you will see FOUC for a short period of time before the
> styling fixes it. At regular speeds, the flash of content is more like a
> blip. However, at lower bandwidth, and with media such as large SVG images,
> you will see a noticeable flash of this SVG and content.

I would suggest filing a new bug to discuss this, rather than reviving this very old bug.  Many circumstances have changed since this bug first appeared.  There we can dive into more details of exactly what you're seeing.

In addition, RDM's throttling is a very rough simulation.  I would not consider it accurate enough to make a judgement of the platform's behavior at slow speeds.  It is intended only for site developers to get a basic feeling for how their site might perform.  For a platform issue like this, OS level throttling tools would be a better choice.

Ritu, it sounds like Micah is using RDM to demonstrate a possible platform issue.  There is no issue with RDM as a tool.  Additionally, it sounds like the platform issue is potentially longstanding, not something new.
Status: REOPENED → RESOLVED
Closed: 13 years ago → 7 years ago
status-firefox55: affected → ---
status-firefox56: affected → ---
status-firefox57: affected → ---
status-firefox58: affected → ---
status-firefox-esr52: affected → ---
tracking-firefox57: ? → ---
Flags: needinfo?(jryans)
Resolution: --- → WORKSFORME
I agree, thanks for clearing out the flags.
Thank you for the quick response! After more testing and research with both the site I'm developing as well as live sites around the web, I can reproduce this with and without RDM. I've filed a related bug here: https://bugzilla.mozilla.org/show_bug.cgi?id=1404468

Another bug points to the autofocus attribute being an issue:
https://bugzilla.mozilla.org/show_bug.cgi?id=712130

This could be related, however some of the live sites I tested did not have autofocus and still had FOUC.
You need to log in before you can comment on or make changes to this bug.