Firefox, this forum and flash of unstyled content (FOUC)

[SavingWithBabies]

So is anyone else using Firefox and noticing the flash of unstyled content? I'm seeing it on every page navigation and it's a bit... eye grating? I took a quick look and I think the problem is the CSS and JS assets are being loaded with every page request over and over by Firefox. They aren't being cached for at least a short duration browser-side.

It looks like phpBB does it's own caching magic which can get stomped on so perhaps it's this:

https://www.phpbb.com/community/viewtopic.php?t=2441741

I'm happy to help fix this if that would get it fixed .

I decided to switch my default browser and search engine from Google Chrome and Google to Firefox and DuckDuckGo. It's been smooth sailing so far except this oddity.

[Ego]

Using firefox with no issues here.

[TheWanderingScholar]

Same here. Using Firefox without a hitch.

[Seppia]

I'm also in the no issues camp

[jacob]

I'll note that we run a very bare-bones operation here with almost/no add-ons using somewhere between one and zero trackers as well as the standard software/themes which typically gets updated within a week of publication. This in order to do the absolute minimum amount of maintenance. No bespoke solutions. Issues should resolve automagically within a week or so.

Thus, if you have issues, it's almost always "you"(*) except in the cases where it isn't... so I appreciate pointing out problems. We famously went to this system after the infamous bluehost clusterfuck resulting from them caching the forum pages willy-nilly rendering the forum inoperable for almost a week. I apologize for the severe withdrawal symptoms caused all around.

First checks/tests should always involve stuff like deleting the cache, trying again w/o fancy plugins, using another/friends browser from somewhere else.

(*) Actually, insofar you didn't change anything recently, it's more likely it's typically "your" ISP engaging in dumbfuckery Second-most likely culprit is some auto-update @#$@#$ software.

I apologize for using the f-word twice and almost thrice, but f#$%#% is becoming an increasingly apt description of interweb operations.

[5ts]

I block almost everything by default with multiple browser plugins and this site/forum works flawlessly for me. Thank you Jacob for making this work so well, although this seems to be a side effect of the minimum maintenance strategy.

[slsdly]

The Cache-Control header [1] in the HTTP response for the CSS subresources sets max-age to 0. My understanding is that Chrome ignores the cache control directives for subresources, and only does validation for the main resource [2], whereas Firefox appears to be taking the directives to the letter.

[1] https://developer.mozilla.org/en-US/doc ... Directives
[2] https://blog.chromium.org/2017/01/reloa ... ge_26.html

[horsewoman]

Yes, I use Firefox and I see the content like bullet points with links for a short time.
This as also happens with Leo.org, an online dictionary I often use.

[SavingWithBabies]

Yeah, before I posted, I tried another profile actually -- so completely fresh Firefox and same problem. I think it might depend on your internet connection (latency between you and the server) so some will see it and some may not. However, it's quite easy to debug -- if you open the network tools and refresh the page and/or navigate to some other threads, you will observe 200 responses on the CSS and JS files instead of 304 (not changed/modified). So basically, the CSS and JS is fetched on every page load where typically it would be cached for at least a short duration. There are some cache headers coming back on the request but for whatever reason, Firefox interprets those as "do not cache" which I believe leads to the FOUC.

@slsdly Ah, that must be it. I was looking at those headers but missed the max-age: 0.

Could it be the headers were set a bit too aggressively the wrong way to combat the caching issue and they are getting applied to the static assets along with the non-static (ie threads/posts) content?

[SavingWithBabies]

I should have thought to do this first but here is a factual report (scroll down to "Leverage browser caching of static assets"):

https://www.webpagetest.org/result/1912 ... imization/

Code: Select all

FAILED - (No max-age or expires) - https://forum.earlyretirementextreme.com/styles/se_square/theme/stylesheet.css?assets_version=98
FAILED - (No max-age or expires) - https://forum.earlyretirementextreme.com/styles/se_square/theme/en/stylesheet.css?assets_version=98
FAILED - (No max-age or expires) - https://forum.earlyretirementextreme.com/styles/se_square/theme/images/site_logo.gif
FAILED - (No max-age or expires) - https://forum.earlyretirementextreme.com/styles/se_square/theme/en/icon_user_offline.gif
FAILED - (No max-age or expires) - https://forum.earlyretirementextreme.com/download/file.php?avatar=460_1570250414.jpg
FAILED - (No max-age or expires) - https://forum.earlyretirementextreme.com/download/file.php?avatar=1631_1560877833.jpg
FAILED - (No max-age or expires) - https://forum.earlyretirementextreme.com/images/smilies/icon_e_smile.gif
FAILED - (No max-age or expires) - https://forum.earlyretirementextreme.com/styles/prosilver/template/ajax.js?assets_version=98
FAILED - (No max-age or expires) - https://forum.earlyretirementextreme.com/styles/prosilver/template/forum_fn.js?assets_version=98
FAILED - (No max-age or expires) - https://forum.earlyretirementextreme.com/styles/se_square/theme/responsive.css
FAILED - (No max-age or expires) - https://forum.earlyretirementextreme.com/styles/se_square/theme/colours.css
FAILED - (No max-age or expires) - https://forum.earlyretirementextreme.com/styles/se_square/theme/icons.css
FAILED - (No max-age or expires) - https://forum.earlyretirementextreme.com/styles/se_square/theme/forms.css
FAILED - (No max-age or expires) - https://forum.earlyretirementextreme.com/styles/se_square/theme/cp.css
FAILED - (No max-age or expires) - https://forum.earlyretirementextreme.com/styles/se_square/theme/buttons.css
FAILED - (No max-age or expires) - https://forum.earlyretirementextreme.com/styles/se_square/theme/content.css
FAILED - (No max-age or expires) - https://forum.earlyretirementextreme.com/styles/se_square/theme/links.css
FAILED - (No max-age or expires) - https://forum.earlyretirementextreme.com/styles/se_square/theme/common.css
FAILED - (No max-age or expires) - https://forum.earlyretirementextreme.com/styles/se_square/theme/utilities.css
FAILED - (No max-age or expires) - https://forum.earlyretirementextreme.com/styles/se_square/theme/base.css
FAILED - (No max-age or expires) - https://forum.earlyretirementextreme.com/styles/se_square/theme/normalize.css
FAILED - (No max-age or expires) - https://forum.earlyretirementextreme.com/assets/javascript/core.js?assets_version=98

[IlliniDave]

It's happened to me (w/firefox) on occasion, usually it is brief here. Sometimes on other sites I have to refresh a page every now and then to get it to clear.