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
115
votes
14 answers

Eliminate flash of unstyled content

How do I stop the flash of unstyled content (FOUC) on a web page?
CMS Critic
  • 3,496
  • 4
  • 20
  • 13
56
votes
9 answers

Flash of unstyled content (FOUC) in Firefox only? Is FF slow renderer?

I'm not seeing this issue in any other browser that I've tested - IE, Chrome, Opera - but whenever I load a page from the server, I'm seeing a flash of unstyled content before the CSS is applied. This is even happening on subsequent page loads where…
user3199790
  • 561
  • 1
  • 4
  • 3
55
votes
5 answers

AngularJS strategy to prevent flash-of-unstyled-content for a class

I have an AngularJS project, I want to prevent a FOUC during page load on a classname. I've read about ng-template but that seems useful only for content within a tag. I would like it to be "login" on page load. Any…
Casey Flynn
  • 13,654
  • 23
  • 103
  • 194
30
votes
3 answers

How to stop FOUC when using css loaded by webpack

I am getting FOUC when loading css inside of my entry point when using webpack. If I remove my css from being loaded by webpack and just include it in my html file as a normal link then the problem with FOUC goes away. Note: This not just with…
dan
  • 2,857
  • 6
  • 34
  • 60
16
votes
1 answer

Flash of unstyled content (FOUC) in Firefox when using 'autofocus' in input field

Actually, this is more of an error description than a question. I noticed flash of unstyled content (FOUC) in Firefox on a very simple login page. There are no images used. No heavy CSS. All Javascript placed at the end of the code, right before the…
Christian
  • 325
  • 2
  • 10
12
votes
4 answers

AngularJS: How to prevent "code flash" in page while loading

I have created a simple app using AngularJS. When I open the page for a second I see the screen below: However, after the load is complete I see the loaded and styled content which is fine: How do I prevent the flash of AngularJS code on my page ?…
Cemre Mengü
  • 18,062
  • 27
  • 111
  • 169
11
votes
1 answer

Flash of Unstyled Content (FOUC) for Nextjs using Mantine

I switched to Mantine and followed this approach to solve the FART (Flash of inAccurate coloR Theme), but the webpage runs into a new issue. There is a flash of Unstyled component before the page renders. How to solve this issue? I looked into…
Rohit
  • 130
  • 2
  • 6
10
votes
4 answers

How can I avoid a "Flash of Unstyled Content" using fixed-width cells in CSS Tables?

My web GUI's layout is partially driven by CSS tables. This is mainly because I want the "cells" to have the same height under all situations without any massive headaches surrounding alignment. Overall, this approach has been very…
Lightness Races in Orbit
  • 378,754
  • 76
  • 643
  • 1,055
9
votes
4 answers

Implementing a dark theme in jekyll

I'm trying to add a simple light/dark mode toggle to my Jekyll site. The way I have it setup now is that the body has a dark class that is switched to a light class on toggle, and the theme is persisted in localStorage and loaded whenever the user…
Meme Overlord
  • 997
  • 1
  • 9
  • 16
8
votes
0 answers

Webpack5 + MiniCssExtractPlugin + html-webpack-plugin not add link tag on index.html

I try to build in production with Webpack5 + MiniCssExtractPlugin + html-webpack-plugin and other plugins but i'm not able to have css tag included in index.html. Every time css files are append by javascript with "flash of unstyled content" (FOUC)…
Marco Giacobazzi
  • 81
  • 2
7
votes
0 answers

How to solve the Flash of Unstyled Content in production?

I'm using NextJs for my app and I'm having a FOUC on production. I'm not using styled components, just moduled and global CSS/SCSS. I assume the problem may be from my _document.js file import React from 'react'; import Document, {Html, Head, Main,…
Armen Nersisyan
  • 81
  • 1
  • 4
6
votes
4 answers

Page Load - White "flash" inbetween pages

There are two websites, one live one under development. I am porting a site to Zend Framework (for maintainability/integration purposes). The original (live) site has seamless page loads - it will load, then update the content on the screen while…
Mahdi.Montgomery
  • 2,024
  • 4
  • 17
  • 21
6
votes
2 answers

jQuery Vertical mega menu sub menus flashing on load. How to stop it from flashing in wordpress

I have a wordpress web site with Twenty Eleven Child Theme. In my sidebar I've embedded a jQuery Vertical Mega Menu widget from: http://wordpress.org/extend/plugins/jquery-vertical-mega-menu/ The menu works fine. The only problem is that when the…
es1
  • 1,231
  • 3
  • 14
  • 27
5
votes
3 answers

How to stop FOUC from happening with native Web Components

I'm experimenting with native web components, and so far I actually really like them. I have created a microsite that has a homepage, about page, and a contact page, and a menu that works by changing the hash component of the URL. However, I'm…
kohloth
  • 742
  • 1
  • 7
  • 21
5
votes
0 answers

How to Avoid FOUC- Flash of Unstyled Content in angular 2 and above

What is the best way to avoid FOUC in angular 2 and above? Is there any alternative of ng-cloak in angular 2 versions. I have research on this, but couldn't found any satisfying way to prevent FOUC.
user2527725
  • 121
  • 1
  • 8
1
2 3 4 5 6 7