4 ms·

> why have we decided that the FOUC (“flash of unstyled content”) ... is such a dire problem I think the answer is that different people are sensitive to diffe

> why have we decided that the FOUC (“flash of unstyled content”) ... is such a dire problem I think the answer is that different people are sensitive to different things. I'll often come across articles going to great length to reduce some minor jank in animations or page load, and I'll be looking at it thinking yeah, I can see it, but it really doesn't bother me enough to fix. Certainly not by going to these lengths. Meanwhile, FOUC bothers me a lot, to the point where I can't understand that its accepted in any form. I'd much rather that I don't get shown the page at all until the real font is loaded. Otherwise my eye will have tracked to the text, started reading and then there's a jarring reflow and I lose my place and have to find it again. If I'm scanning for information through lots of websites, it does mentally tire me.

saurik 1y ago
I think there are different use cases, though; like, I agree with you that I find it really really annoying when I'm starting to read a paragraph of text... but, for the various buttons and navigation structure--even the headings--having them temporarily in the wrong font is a major win, as it lets me start to orient myself into the page (and might even help me get to my next nav point and out of the site before the font even bothers to load).
systoll 1y ago
Based on all this is does seem like there's a 'missing' option to only swap the fonts when they’re off-screen, which avoids: 1. blocking first-paint 2. 'flashes' of anything 3. Not showing the font at all. A quick mockup: https://codepen.io/pjwdev/pen/ByoLJoR https://codepen.io/pjwdev/pen/ByoLJoR (This is an intentionally bad fallback. If it were Georgia the effect would be a whole lot more subtle.)
- yencabulator 1y ago
  Neat trick. For the sake of the demo, it's easier to visualize by putting a little background color in .offscreened Any layout change from the font changing off-screen still causes the scroll bar to jump around and change size.

saurik 1y ago

I think there are different use cases, though; like, I agree with you that I find it really really annoying when I'm starting to read a paragraph of text... but, for the various buttons and navigation structure--even the headings--having them temporarily in the wrong font is a major win, as it lets me start to orient myself into the page (and might even help me get to my next nav point and out of the site before the font even bothers to load).

systoll 1y ago

Based on all this is does seem like there's a 'missing' option to only swap the fonts when they’re off-screen, which avoids: 1. blocking first-paint 2. 'flashes' of anything 3. Not showing the font at all. A quick mockup: https://codepen.io/pjwdev/pen/ByoLJoR https://codepen.io/pjwdev/pen/ByoLJoR (This is an intentionally bad fallback. If it were Georgia the effect would be a whole lot more subtle.)

yencabulator 1y ago
Neat trick. For the sake of the demo, it's easier to visualize by putting a little background color in .offscreened Any layout change from the font changing off-screen still causes the scroll bar to jump around and change size.