Open Bug 1404468 Opened 3 years ago Updated 1 month ago
Various websites like Git
Hub load with flash of unstyled content (FOUC)
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.
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.
[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.
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!
Not a new regression (or not a regression at all), not tracking.
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/
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?
(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.
https://github.com/php/php-src/blob/php-7.2.0RC6/NEWS reproduces this reliably for me fwiw.
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
Jet, is there anything sites can do to mitigate this on their end?
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.
> 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.
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 ), 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...  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.
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)
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?
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.
(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.
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.
Enabling the Ghostery Firefox addon causes https://github.com/ to have a FOUC on load.
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
Too late to fix this in 58. Would it help to break out the particular causes/STR into dependent bugs, here?
> 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
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.
In regards to this ticket, Ghostery v8.0.9 fixed the FOUC issue on our end.
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...
(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.
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.
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.
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
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.
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.
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. :(
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.
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?
> https://codepen.io/pen/ Right, that's tracked by bug 1420362. > Should I contact the author of S3.Translator? Probably a good idea, yes.
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.
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.
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.
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.
You need to log in before you can comment on or make changes to this bug.