Stack Overflow
Stack Overflow

Questions tagged [fouc]

A flash of unstyled content (FOUC) is an instance where a web page appears briefly with the browser's default styles prior to loading an external CSS stylesheet.

A Flash of Unstyled Content (FOUC) is a phenomenon which occurs when an issue with markup (HTML), styles (CSS), or scripts (JavaScript) causes the browser to briefly display the content of a Web page without any styles applied. This is generally undesirable since the page often appears quite different from intended.

If you are working on a Web page and you see content not displaying as it should for a brief period, followed by a correct display, this tag is appropriate for your question.

96 questions
4
votes
3 answers

Next js static export unstyled html flash. [FOUC]

I am working with next.js and everything seems to be fine when I am using app with npm run dev. But when I am exporting my next.js app to a static files with command npm run build and trying to open my project for part of the second the screen is…
Robertas Ankudovicius
  • 304
  • 2
  • 5
  • 14
4
votes
2 answers

FOUC: Initial page loaded without any styles

I'm trying to apply global styles by importing .scss files in _app.js for a Nextjs app. But the issue is, styles are not getting pre-applied on page load. Because of which FOUC happens for all the initial page render. Example 1 Given below is a…
boop_the_snoot
  • 3,209
  • 4
  • 33
  • 44
4
votes
1 answer

Flash of Unstyled Content (FOUC) when using gatsby with Emotion?

I'm trying to add Emotion to an existing Gatsby static site. It's generally working great except that the server render doesn't actually render the styles. For a brief moment after loading, or forever if you have JavaScript disabled, only one .js…
Josh
  • 1,997
  • 13
  • 21
4
votes
1 answer

Angular universal styling FOUC on server to client transition

I have an issue with my universal app, where when the server side app is swapped for the client side app, there is a moment when there is no styling for the components which are part of my routed component for that page. This results in the page…
Heather Roberts
  • 1,978
  • 1
  • 24
  • 33
4
votes
1 answer

How to resolve FOUC (Flash of unstyled content) using React components?

As the title says, how do you guys solve FOUC problem with React components? As my React components get mounted and componentDidMount handler gets called, I bind to various JQeuryUI widgets. This is where the FOUC happens.
jiminssy
  • 2,149
  • 6
  • 28
  • 45
4
votes
4 answers

Browser displays page without styles for a short moment (visual glitch)

I have observed that, very infrequently, Internet Explorer (7 or 8, it does not matter) displays our web pages (www.epsitec.ch) a short time without applying the CSS. The layout appears completely broken, with everything displayed sequentially from…
Pierre Arnaud
  • 10,212
  • 11
  • 77
  • 108
4
votes
0 answers

Safari Mobile: How do I prevent flash of white on page load?

When HTML5 pages load in Safari mobile, there is a split-second flash of white before the content displays. Sort of like the old' "flash of unstyled content (FOUC)" problem, but with a white screen instead... call it a "flash of white (FOW)"…
kmiklas
  • 13,085
  • 22
  • 67
  • 103
4
votes
2 answers

What is data-fouc-class-names="swift-loading"?

I noticed the following near the top of Twitter's source code: data-fouc-class-names="swift-loading" A quick Google search turns up a few other websites that use this too but I couldn't find anything that describes what it's for. Making it into the…
Marcel
  • 27,922
  • 9
  • 70
  • 85
4
votes
4 answers

Cufon font replacement: How can I eliminate the flash of unstyled text that occurs when the page loads?

I'm using Cufon to replace the font of selected heading elements on a site I'm working on, but whenever I load a page, there is a noticeable flash of unstyled text before Cufon replaces the text. I expect that I may be doing it wrong. Here's what I…
John Stephens
  • 781
  • 2
  • 12
  • 19
3
votes
0 answers

FOUC in NextJS using Tailwind Css

I have a FOUC on the production page of a site I'm working on using NextJS and TailwindCSS. It exists in varying degrees across browsers, but it seems to be worst on Desktop Firefox. You can view it here: Bretton Does Nails From what I've found I…
Taouen
  • 65
  • 7
3
votes
4 answers

jQuery Masonry callback not working

I am trying to get a callback function to execute when jQuery Masonry has done its positioning magic, preventing a flash of unstyled content in my code. For the purpose of testing, though, I am using a simple alert that isn't called at all. var…
Craig
  • 972
  • 3
  • 13
  • 38
3
votes
3 answers

How to avoiding FOUC on dynamically generated jQuery UI tabs

I dynamically create multiple tabs using jQUery UI tabs -- the tabs are created using a foreach on a view page as follows (some codeigniter markup):