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
1
vote
4 answers

(jquery) prevent div from showing during page load

If you goto www.rambocats.com, as the page loads you'll see this bottom-center div showing up for a second or two, then disappears. (Div says "Gallery II" in pink letters). It's supposed to only appear once you've scrolled down to about 2/3 of the…
Stephen
  • 137
  • 1
  • 2
  • 10
1
vote
2 answers

Does WP complete the rendering of the page on server side before showing the page?

The static html pages of my project has javascript dynamically modified content and that causes FOUC (Flicker of Unstyled Content). So I made the content invisible by default and toggle display to visible after DOM ready. The static html pages…
Ian Y.
  • 2,293
  • 6
  • 39
  • 55
1
vote
0 answers

flash of un-styled content. How to hide all custom fonts before the page has loaded?

I'm trying to fight FOUC. My site relies heavily on custom fonts. I've already made it not display the page until the fonts have loaded, but in opera I still get a bit of FOUC on each page change. So, I thought I'd apply additional measures and hide…
domino
  • 7,271
  • 12
  • 36
  • 48
0
votes
1 answer

CSS sheet being ignored when site initially loads

I am designing this site for a close family friends business, I am almost don't minus SEO however I have this really annoying thing happening on one of the pages because I have added this 3rd party email form onto the site. When the page loads for a…
C.Johns
  • 10,185
  • 20
  • 102
  • 156
0
votes
0 answers

Flash of unstyled content when doing router.refresh in Nextjs13

Nextjs 13 at least at one point recommended using router.refresh() to mutate data and revalidate if you let the user for example click a button in a client component that changes some data. When I do this, the entire page flashes its unstyled…
Yeats
  • 2,112
  • 3
  • 30
  • 46
0
votes
0 answers

react-sidebar-pro FOUC in Next.JS

I using Sidebar Pro in Next.JS but like JS run before style is ready and then show the unstyled at first like this i also had try to add compiler: { styledComponents: true, } on next.config.js and add getInitialProps in _document like…
blanksix
  • 340
  • 1
  • 16
0
votes
1 answer

FOUC How to remove "Flash Of Unstyled Content" in Nuxt

As I was testing my Nuxt application, I purposely entered page URLs that I know didn't exist to test my 404 page; I then saw a flash of a completely white screen before the page navigated to my 404 page. How do you get rid of it?
sandalwoodsh
  • 129
  • 1
  • 11
0
votes
1 answer

How to deal with FOUC while implementing style switch

I'm implementing a theme switcher with JavaScript and saving the theme in the cookie as the answer here: CSS Stylesheet Switching via adding cookies, but I'm struggling with FOUC while switching between pages now. I found some answers that don't…
Developer
  • 35
  • 12
0
votes
1 answer

fouc problem with nextjs and material ui v4 loads a raw html first

I recently migrated to nextjs. I'm using material v4 and next version 10.2 I've tried the official example in material ui site to prevent loading the raw html first by adding the _document.js…
Evaa
  • 283
  • 1
  • 2
  • 15
0
votes
1 answer

react-helmet changing css in the head tag during runtime has lag (no css for 1 sec before it shows updated css)

This is a simplified React component that uses helmet to update the link css on runtime: function App() { const [brand, setBrand] = useState('nike') return (
Carlos Jaime C. De Leon
  • 2,476
  • 2
  • 37
  • 53
0
votes
0 answers

FOUC (Flash of unstyled content) since less.js

I started to use Less.js in my project but since I packed all my style in a .less file, I'm getting very bad FOUC. Anyone knows what to do against that?
SomeDumbQuestions
  • 108
  • 1
  • 8
0
votes
1 answer

Eliminating Flash of Unstyled Content (FOUC) in ASP.NET Core 5 MVC

I have an ASP.NET Core 5 MVC web application that is suffering from "Flash of Unstyled Content" (FOUC). Essentially, my styles show for a short period while the page is loading. I saw this Stack Overflow question about dealing with FOUC, and the…
Ethan Partridge
  • 147
  • 3
  • 12
0
votes
0 answers

Avoiding flash of unstyled content for javascript-injected css in

I have the following JavaScript in the of a simple static page, which specifies either a.css or b.css as the stylesheet to use depending on the result of some additional JavaScript (useA(), not shown here).