Various websites like GitHub load with flash of unstyled content (FOUC)

NEW
Unassigned

Status

()

defect
P3
normal
2 years ago
9 days ago

People

(Reporter: micah, Unassigned)

Tracking

(Depends on 2 bugs, {compat, regression, regressionwindow-wanted})

55 Branch
Points:
---
Dependency tree / graph

Firefox Tracking Flags

(firefox-esr52 wontfix, firefox-esr60 wontfix, firefox55 wontfix, firefox56 wontfix, firefox57 wontfix, firefox58- wontfix, firefox59 wontfix, firefox60 wontfix, firefox61 wontfix, firefox62 fix-optional)

Details

(Reporter)

Description

2 years ago
User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.12; rv:55.0) Gecko/20100101 Firefox/55.0
Build ID: 20170824053838

Steps to reproduce:

1. Enter URL in address bar: https://adactio.com/
2. Load the website


Actual results:

When the website starts loading, the first thing to show is markup without styles. Styles then apply to markup and website looks designed.

The best way to see this in action is loading a non-cached site and with throttled bandwidth or on a slow connection. I also was able to simulate it with Responsive Design Mode's throttled speeds.


Expected results:

Website should not show markup before styles are applied.
(Reporter)

Comment 1

2 years ago
This is similar behavior that is reported here: https://bugzilla.mozilla.org/show_bug.cgi?id=712130

Adactio, however, does not contain the autofocus attribute on any input elements and still shows FOUC. Other websites I tested which did not have any script elements in the head element, they all suffered from FOUC.
(Reporter)

Comment 2

2 years ago
[Tracking Requested - why for this release]: I think this is worthy of being investigated further and fixed for the next releases.
I also see this on https://navyfederal.org when attempting to sign in.
Component: Untriaged → Layout
Product: Firefox → Core

Comment 4

2 years ago
I am getting a lot of annoying FOUC on most pages I visit with Firefox Quantum (macOS High Sierra, Firefox Quantum 57.0b6 (64-bit)). Would really love to see this patched because the browser is otherwise amazing!
Priority: -- → P3

Comment 6

a year ago
For http://kanbasu.liip.ch/ at least, the FOUC is a clear regression between firefox-esr (52.5.0) and firefox (57.0).

We also see a terrible FOUC on https://styleguide.liip.ch/ and a limited one on https://www.liip.ch/

Comment 7

a year ago
Also https://github.com/liip/kanbasu/ has a clearly worsened FOUC between the same versions. I figured GitHub would be a more interesting target.
I've seen GitHub FOUC recently; checking their source code I can confirm their CSS are all referenced in the <head> as <link>s.

It's definitely a regression given we have break away from what's described (unfortunately, unspec'd behavior) here:

https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/ZAPP8aTnyn0/hHzIdC-GCAAJ

Astley, this is what we have talked about earlier. This is a critical behavior that websites rely on to ensure their experience; I would worry this breaks compat too. Would you be interested in figuring out what had regressed this?
Flags: needinfo?(bmo)
Summary: Websites load with flash of unstyled content (FOUC) → Various websites like GitHub load with flash of unstyled content (FOUC)
(In reply to Tim Guan-tin Chien [:timdream] (please needinfo) from comment #8)
> Astley, this is what we have talked about earlier. This is a critical
> behavior that websites rely on to ensure their experience; I would worry
> this breaks compat too. Would you be interested in figuring out what had
> regressed this?

I can easily see the FOUC on Github page in RDM mode with throttled network speed to 2G.
Thanks for pointing it out, I'll look into it further.

Comment 11

a year ago
It also happens for extensions that show content on new tabs. Example: https://addons.mozilla.org/en-US/firefox/addon/earth-view-from-google/
Many of the symptoms noted here are reduced by reverting the fix to bug 1283302.

I'd note that our user studies on bug 1283302 indicated an overall positive user response to painting sooner. We can revisit the decision given Firefox 57's much faster overall rendering speed, but the potential for FOUC was definitely a known factor in the change:

https://bugzilla.mozilla.org/show_bug.cgi?id=1283302#c0
Duplicate of this bug: 1419810
Jet, is there anything sites can do to mitigate this on their end?
Flags: needinfo?(bugs)
Boris suggests adactio.com is doing some flickering on load due to not providing width/height on the images.  So we are doing layout before we know the image sizes.

Dropping my NI since I guess a lot of the issues are otherwise explainable.
Flags: needinfo?(bugs)
> is there anything sites can do to mitigate this on their end?

It really depends on the site.  Generally, I would say "Put all your styles in <head> and make sure that any script that asks for layout information comes after them".

What we should do on our end is fix the autofocus thing.  Past that, looking at the links in this bug:

https://adactio.com/ -- I can't reproduce FOUC, even when force-reloading.  It loads pretty much instantaneously, with styles, except for the images.   If I throttle to "GPRS" in responsive design mode, it's much slower, but still no FOUC: pops in with all styles applied.  If someone is seeing FOUC on this site and also compiling Firefox I'm happy to walk you through debugging it.  If someone is seeing FOUC on this site and not compiling Firefox, I'd like more information on your extensions and whatnot.

https://navyfederal.org/ -- Assuming this is talking about the failed sign-in case, i.e. at <https://my.navyfederal.org/NFOAA_Auth/login.jsp>, that page does autofocus.

http://kanbasu.liip.ch/ -- As for adactio.com: can't reproduce FOUC, even with throttling.  Need help reproducing.

https://styleguide.liip.ch/ -- Can't reproduce FOUC, need help reproducing.

https://www.liip.ch/ -- Can't reproduce FOUC, though on a force-reload I do get the text showing before the webfont finishes loading.

https://github.com/liip/kanbasu/ -- Can't reproduce either (there's no autofocus field for me on this particular github page, even when not logged in, fwiw).

https://github.com/php/php-src/blob/php-7.2.0RC6/NEWS -- likewise can't reproduce.  :(

I haven't tested the exension mentioned in comment 11.
(Reporter)

Comment 17

a year ago
Boris, should I create a screencast of Adactio's behavior? When I throttle go "GPRS" in RDM, it first shows the markup and then applies the style. I can reproduce this in all current versions of Firefox without any addons installed.
Another site that seems to do more FOUC in firefox vs chrome

https://codepen.io/pen/
(In reply to Boris Zbarsky [:bz] (no decent commit message means r-) from comment #16)
> http://kanbasu.liip.ch/ -- As for adactio.com: can't reproduce FOUC, even
> with throttling.  Need help reproducing.
> 
> https://styleguide.liip.ch/ -- Can't reproduce FOUC, need help reproducing.
> 
> https://www.liip.ch/ -- Can't reproduce FOUC, though on a force-reload I do
> get the text showing before the webfont finishes loading.
> 
> https://github.com/liip/kanbasu/ -- Can't reproduce either (there's no
> autofocus field for me on this particular github page, even when not logged
> in, fwiw).
> 
> https://github.com/php/php-src/blob/php-7.2.0RC6/NEWS -- likewise can't
> reproduce.  :(
> 
> I haven't tested the exension mentioned in comment 11.

I've find it easier to reproduce if I start a `mach build` in the background... :) It's kind of unrelated to the network (there is no need to use network throttling or RDM mode).

(In reply to Jet Villegas (:jet) from comment #12)
> Many of the symptoms noted here are reduced by reverting the fix to bug
> 1283302.
> 
> I'd note that our user studies on bug 1283302 indicated an overall positive
> user response to painting sooner. We can revisit the decision given Firefox
> 57's much faster overall rendering speed, but the potential for FOUC was
> definitely a known factor in the change:
> 
> https://bugzilla.mozilla.org/show_bug.cgi?id=1283302#c0

Thanks for the comment. I first noticed this with the EarthView from Google extension (comment 11). 

Could you help me understand what the timeout in bug 1283302 is really waiting for? My tests show that we still block rendering if we are waiting for stylesheet from the network (can be quickly tested with [1]), so I am a bit confused about what time'd out when the stylesheet came from an extension package or local cache. Do we give up CSS parsing or whatnot after 5ms now? If so that explains it...

[1] data:text/html,<html><head><link rel="stylesheet" href="http://192.168.123.123/thiswilltimeout.css"></link></head><body><h1>Youshouldnotseethissoon</h1></body></html>
(In reply to Ben Kelly [:bkelly] from comment #18)
> Another site that seems to do more FOUC in firefox vs chrome
> https://codepen.io/pen/

I've filed bug 1420362 for FOUC issue on a site with <iframe> in its body.
Flags: needinfo?(bmo)
See Also: → 1420362, 712130
Another FOUC page slightly worse in Firefox than Chrome: https://inciweb.nwcg.gov/

(I hope it's useful to post examples here as I see them)
Duplicate of this bug: 1425742

Comment 23

a year ago
Even the wiki of Mozilla has this problem : https://wiki.mozilla.org/Main_Page
(don't forget to clear the cache with Ctrl+F5 to see it).
I think there are enough examples now?

Comment 24

a year ago
Hi, I can see that the bugs about FOUCs are still not fixed... It seems that they are annoying visual bugs, I wonder why anyone (from mozilla?) works on...
Is someone here can do something or that's not a priority right now?
Thanks.
Flags: needinfo?(bugs)
(In reply to Julien L. from comment #24)
> Hi, I can see that the bugs about FOUCs are still not fixed... It seems that
> they are annoying visual bugs, I wonder why anyone (from mozilla?) works
> on...
> Is someone here can do something or that's not a priority right now?
> Thanks.

Please see my earlier comment 12.
Flags: needinfo?(bugs)
(Reporter)

Comment 26

a year ago
I did extensive testing this evening to test the FOUC issues I originally reported in other instances of Firefox, starting with Firefox Developer Edition.

I have found one add-on in particular that causes it: https://addons.mozilla.org/en-US/firefox/addon/ebates/

I tried many various combinations of add-ons to see what happened with FOUC on the various sites mentioned here. While FOUC does still exist without the above add-on with other sites, sometimes due to autofocus or other reasons, I was able to reproduce FOUC consistently with the Ebates add-on.

This is proof that add-ons are at least a second reason why FOUC occurs in Firefox, with or without autofocus being an issue.

I would like to recommend all reporters in this thread to download Firefox Developer Edition and test their sites without add-ons.
https://www.mozilla.org/en-US/firefox/developer/

If you aren't able to see FOUC right away, start adding the add-ons your normal Firefox is using until you can reproduce FOUC that you reported.

Comment 27

a year ago
Enabling the Ghostery Firefox addon causes https://github.com/ to have a FOUC on load.
(Reporter)

Comment 28

a year ago
I can confirm I see similar behavior on Firefox Dev Edition 59.0b1 on macOS with only Ghostery extension and Github.com while logged in. When visiting Github logged out, it already suffers from FOUC b/c of the autofocus bug https://bugzilla.mozilla.org/show_bug.cgi?id=712130

Comment 29

a year ago
Just wanted to add that I see the same thing (58.0.1 64bit Windows 7 Pro).  In my case, it's partially caused by the Imagus extension on some pages/sites.

I made this thread: https://www.reddit.com/r/imagus/comments/7v52mc/firefox_58_and_odd_imagus_rendering_issue_at_a/

I can make it always happen here: https://www.mysstie.com/systeminfo.shtml if I don't disable Imagus at that domain.  What's weird, if I load a Javascript file or something at the bottom, then that unstyled flash goes away.
Too late to fix this in 58.  Would it help to break out the particular causes/STR into dependent bugs, here?
(In reply to MarkRH from comment #29)
> I can make it always happen here: https://www.mysstie.com/systeminfo.shtml
> if I don't disable Imagus at that domain.  What's weird, if I load a
> Javascript file or something at the bottom, then that unstyled flash goes
> away.
I can reproduce this on Nightly. I do have Imagus and Adblock Plus enabled. Boris can you take a look?
Flags: needinfo?(bzbarsky)
> Would it help to break out the particular causes/STR into dependent bugs, here?

YES!  People should definitely do that, because this sort of thing can be caused for a variety of reasons.

Looking over the last few comments:

1) There is a known issue with Ghostery.  It was reported to them; see bug 712130 comment 90.

2) I filed bug 1437644 on the Imagus issue from comment 29.
Depends on: 1437644
Flags: needinfo?(bzbarsky)

Comment 33

a year ago
AdBlocker Ultimate definitely causes FOUC on a lot of websites!

An extreme example can be seen on this site: http://www.sitiodosnegocios.pt/
Try navigating on the site's main menu bar with AdBlocker enabled; you'll see an extreme FOUC effect.
Then disable the extension and navigate the website again: pages will seem to load instantly.

AdBlocker probably injects scripts on web pages, which could change the way Firefox renders stylesheets, as the layout and rendering algorithm is affected by the presence and location of script tags.
Comment hidden (offtopic)
Comment hidden (offtopic)
In regards to this ticket, Ghostery v8.0.9 fixed the FOUC issue on our end.
Comment hidden (offtopic)
Comment hidden (offtopic)
I can only reproduce the FOUC on https://inciweb.nwcg.gov/ (from all given links in this thread) with my machine (Ubuntu 16.04, Firefox 58)
But since they set css inside of the body like this: 
<style type="text/css">
@import url("/style/style.php");
</style>
... it is the programmers fault.

In any other cases, I think bad written plugins are the problem. I hustle with Adblocker Plus, YouTube Enhancer, Video Download Helper, HTTPS Everywhere, Violentmonkey and NoScript. Everything is fine with these plugins. No FOUC's given.

@Alex: Yes, you are obviously right, but smartasses will get a Mac to work with Windows Software for all eternity, you know...

Comment 40

a year ago
(In reply to Tim Wahrendorff from comment #39)
>> ... it is the programmers fault.
> 
> In any other cases, I think bad written plugins are the problem. I hustle
> with Adblocker Plus, YouTube Enhancer, Video Download Helper, HTTPS
> Everywhere, Violentmonkey and NoScript. Everything is fine with these
> plugins. No FOUC's given.

I don't think it is the websites' fault. It is a bug of Firefox.
With a clean profile, I can see FOUCs on many websites with my laptop computer (intel i5-4200M, 8 GB DDR3, HDD...) in Firefox nightly 60.
With a faster machine, it is less obvious to see these FOUCs.
(Reporter)

Comment 41

a year ago
Julien L, can you test the various websites that give you FOUC on Firefox Developer Edition and do so without any add-ons installed?
https://www.mozilla.org/en-US/firefox/developer/

I agree that there's a bug, one of which I referenced in my first posts and has to do with autofocus, but that problem is fixed as indicated in that thread. If you could list the sites where you see FOUC, I'd like to test it on my computer on Firefox as well.

Some of the sites listed in this thread seem to have improved in the latest versions of Firefox, but one site that still consistently causes FOUC on refresh is https://codepen.io/pen/, even in Firefox Dev and Firefox 60.

Comment 42

a year ago
I can see FOUC on these websites (that are just a selection) :
http://www.jeuxvideo.com/
https://wiki.mozilla.org/RapidRelease/Calendar
https://github.com/gorhill/uBlock/releases
https://codepen.io/pen/
https://inciweb.nwcg.gov/
https://www.mysstie.com/systeminfo.shtml

Please note that you have to erase the cache in order to see the "flashes" (Ctrl+F5).
With Firefox 60, I noticed that the rendering is a bit faster, so these FOUC happens quicker.
(Reporter)

Comment 43

a year ago
I can verify that three of Julien's URLs are worse than the others. Using Firefox Dev Edition 60.0b2, no add-ons:

http://www.jeuxvideo.com/ -- This is the worst of the bunch, with the most noticeable FOUC that even on a ~100Mbps connection shows almost one second of FOUC. I see almost 30 HTTP requests before the styles are applied to get past the FOUC.

https://inciweb.nwcg.gov/ -- This is almost as severe as the site above. There's a combination of @import CSS, external and internal CSS and JS that appear to be render blocking. The first external JS, https://js.arcgis.com/3.20compact/, appears to be rendering blocking by pulling in several other external scripts. During that time is when I first saw the bare markup without styling.

And Codepen is similar to the two above, less noticeable but still present. I don't see autofocus on any of them either.
> http://www.jeuxvideo.com/

This has a pretty obvious FOUC, yes.  The site is doing an offsetParent get from script that runs off a 0ms setTimeout.  This timeout is started before any of the stylesheet loads even start and is basically a timeout loop trying to detect whether an ad blocker is being used...

In any case, it's asking for layout information before the sheets have loaded, so we start layout, and then when more content comes in you get a FOUC until the sheets are done loading.  Short of doing something like Chrome and blocking the parser on stylesheets I'm not sure what we can do here.

> https://wiki.mozilla.org/RapidRelease/Calendar

I'm not sure I'm managing to reproduce this.  I do see the "webfonts are loading" flicker where the text is invisible and then appears once the fonts load, but not other changes to styling or layout...

> https://github.com/gorhill/uBlock/releases

Again, can't reproduce FOUC with today's nightly build here....

> https://codepen.io/pen/

Tracked in bug 1420362.

> https://inciweb.nwcg.gov/

Again, can't reproduce, in a clean profile.  The background images take some time to load, but that's all I see there.

> https://www.mysstie.com/systeminfo.shtml

I'm aware of a FOUC there with some addons (e.g. bug 1437644) but not in a vanilla profile...
Depends on: 1420362

Comment 45

a year ago
This is happening for me with FF 59.0.2 (64-bit) on OSX El Capitan 10.11.6  at the following sites: 

https://github.com/
https://github.com/gorhill/uBlock/releases
https://wiki.mozilla.org/RapidRelease/Calendar
https://www.mysstie.com/systeminfo.shtml


Tried it with AdBlock disabled / enabled - same result.
> This is happening for me with FF 59.0.2

Given that bug 712130 is fixed in 60, any data from 59 or earlier is of somewhat limited utility.

> https://wiki.mozilla.org/RapidRelease/Calendar

Any add-ons involved?  There's nothing on this page that should be triggering FOUC.

> https://www.mysstie.com/systeminfo.shtml

Again, any add-ons involved?  See bug 1437644.

Adblock is _not_ the only add-on that can cause FOUC.

Comment 47

a year ago
No other add-ons involved, vanilla install.  Can't wait for v60 to hit. Thanks!
In that case, I don't understand what you're seeing on https://wiki.mozilla.org/RapidRelease/Calendar and https://www.mysstie.com/systeminfo.shtml...

If you're able to do a video capture that shows what you see and email me a link, that would be pretty useful.  I understand if that's not an option.

Comment 49

a year ago
Check out these screen recordings. What I'm doing is hitting Command + R:

https://www.laurencegellert.com/content/FF_FOUC.mov
https://www.laurencegellert.com/content/FF_FOUC_2.mov
OK.  That second recording definitely shows FOUC...  You're sure this is without any add-ons installed?  I've been trying to reproduce and haven't been able to so far.  :(

Comment 51

a year ago
Good news, when I disable AdBlocker Ultimate, the problem goes away for:
https://wiki.mozilla.org/Release_Management/Calendar
https://www.mysstie.com/systeminfo.shtml
https://github.com/gorhill/uBlock/releases

But github's home page still does it.
https://github.com/

Sorry for my poor QA testing ;) So it must be the plugin AND something strange about github.com unrelated to the plugin.
> But github's home page still does it.

Yes, that's bug 712130, fixed in 60.

Comment 53

a year ago
Hi!
I've just disabled my extension S3.Translator and then loaded the webpage https://wiki.mozilla.org/Release_Management/Calendar
and it solves the problem. There are no FOUC with this extension disabled, except on that website : https://codepen.io/pen/
But I never go on that website so it's not a problem, and I don't think it should really considered as a FOUC.
Should I contact the author of S3.Translator?
Flags: needinfo?(bzbarsky)
> https://codepen.io/pen/

Right, that's tracked by bug 1420362.

> Should I contact the author of S3.Translator?

Probably a good idea, yes.
Flags: needinfo?(bzbarsky)

Comment 55

a year ago
I have contacted the author of S3.Translator on April 11st (2018) in the official thread ( http://forums.mozillazine.org/viewtopic.php?f=48&t=2829503&p=14799107&sid=88bb9f29e387d193bb231acba3546c42#p14799107 ) and I don't have any answer. Yet he answers to the critics on AMO.

Comment 56

11 months ago
There is still a FOUC issue with these websites and the extension S3.Translator (for instance) :
https://forums.lanik.us/viewforum.php?f=23
https://wiki.mozilla.org/Release_Management/Calendar
http://www.revivre.org/forum/index.php

I'm gonna post a critic on AMO about that...
I see it nearly every time I load planet.mozilla.org, FWIW. Clean profile.
planet.mozilla.org has markup like so:

  <script defer="defer" type="text/javascript" src="personalize.js"></script>

defer scripts are defined in the spec to run as soon as parsing of the HTML completes.  They do not block on pending stylesheet loads, unlike inline scripts.  personalize.js line 101 does:

    if (entries[i].parent.offsetTop > 0) {

which requests layout information, which forces layout to happen even though sheets are not loaded yet.

This might be a spec bug; running defer scripts before sheets are loaded is a bit odd.
Flags: needinfo?(annevk)

Comment 59

9 months ago
I filed https://github.com/whatwg/html/issues/3890. I won't have time to work on this for a while I think, but let me know if you think I should make it a priority.
Flags: needinfo?(annevk)

Comment 60

5 months ago
I found that setting font-size of <html> before CSS link causes FOUC on Firefox 63:

Mozilla/5.0 (Macintosh; Intel Mac OS X 10.14; rv:63.0) Gecko/20100101 Firefox/63.0

or

Mozilla/5.0 (Windows NT 10.0; WOW64; rv:63.0) Gecko/20100101 Firefox/63.0

See https://yanni4night.github.io/fouc-of-firefox63/

Chrome does too, but much less seriously.
The issue there is not setting the font size.   It's forcing layout to start via the documentElement.clientWidth access.  Once you do that, we have to start layout, of course, and it's happening before the CSS is loaded.

Comment 62

21 days ago

Seems to have gotten better for awhile but appears to have worsened in 66.0.2. Either that or I've just been used to it and started noticing it again.

Comment 63

9 days ago

Can really see it at https://bugzilla.mozilla.org/show_bug.cgi?id=1404468 (on 66.0.3 now).

Rather depressing that Chrome doesn't really have the issue that I can find.

Comment 64

9 days ago

(In reply to MarkRH from comment #63)

Can really see it at https://bugzilla.mozilla.org/show_bug.cgi?id=1404468 (on 66.0.3 now).

Rather depressing that Chrome doesn't really have the issue that I can find.

Argh, meant to paste: https://forums.warframe.com/topic/1083262-plains-of-eidolon-remaster-hotfix-2471/

(wish this had an edit option sometimes).

You need to log in before you can comment on or make changes to this bug.