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
1 answer

How to stop FOUC when leaving route with 'vue-flickity' carousel/slider?

I'm using the vue-flickity package for MetaFizzy's Flickity in my Vue app. When navigating away from a route that has an instance of vue-flickity slider, you get a brief FOUC showing all the slides unstyled in the document as the slider…
Rhecil Codes
  • 511
  • 4
  • 24
1
vote
1 answer

Javascript and CSS FOUC prevention interfering print stylesheet

I'm using a simple technique to prevent FOUC on my page. I have a "feedback" sliding button on my page that's initially set with display:none in my stylesheet. Later, when JS is loaded and the sliding code is loaded, i apply .css('display', 'block')…
user620240
  • 13
  • 2
1
vote
2 answers

Flash of unstyled content (FOUC) in Firefox only

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 only in Firefox. You can check this url in your…
RichardMiracles
  • 2,032
  • 12
  • 28
  • 46
1
vote
0 answers

Why not put CSS styles in body of HTML?

I have seen this topic and have read, for HTML5, it is not good to put CSS styles inside body tag (embedded; not in-line). I know it may cause FOUC, and that it won't be "valid" HTML. I have big limitations working in a CMS in the ck editor, and I…
user7915166
  • 11
  • 1
1
vote
1 answer

Having a "flash" of extra content using jquery tabs in Wordpress site sidebar

I have created a wordpress website that is using a jquery navigation tab in the sidebar. It's a really cool addition, but my client is complaining that when the page loads, you see a partial list item load to the right of all 3 tabs. I have actually…
diventato
1
vote
0 answers

Shuffeled characters (possible fouc ?) Has anyone seen this before?

Recently I ran into a weird bug where characters get shuffled/mixed when the page is loaded, not everytime but once every few loads you will see it. Kindof like a fouc except it only goes away on reload. I was wondering if someone has ever seen…
Maartje
  • 668
  • 1
  • 8
  • 23
1
vote
2 answers

Flash Of Unstyled Content (FOUC) in Firefox 3.5+

We've reached the end of our tether here trying to overcome a nasty and intermittent FOUC in Firefox 3.5.x+ for a new release we're working on. We've tried: Disabling Javascript in FF Using Quirks mode rendering by removing the DOCTYPE Moving from…
ndorfin
  • 476
  • 2
  • 13
1
vote
0 answers

Firefox reloads webfonts when appending CSS dynamically

I noticed some strange behavior in Firefox, as I was getting a FOUC when appending CSS by javascript. The problem is, Firefox reloads a webfont each time a CSS style is added dynamically with javascript. Although the reloaded file would normally be…
suncat100
  • 2,118
  • 1
  • 17
  • 22
1
vote
1 answer

Brief white screen when loading PHP page?

What would cause a brief flash of white screen while a PHP page is loading? I just noticed it today on a WordPress theme that I am building and am wondering if this is a cause for concern. As a page loads, the screen will flash white before showing…
orbit82
  • 513
  • 3
  • 6
  • 17
1
vote
1 answer

SEO-friendly solution to avoid a flash of unstyled content

I am using the following JS to avoid a flash of unstyled content in a SEO-friendly way: Which also has…
Sam W
  • 85
  • 2
  • 11
1
vote
0 answers

How to stop Angular UI (Bootstrap) accordion from flashing

I've created an accordion based on ngResource (for live/ajax data). All works fine, however the accordion flashes (twice) on loading. How can I stop this? This is my code (service): AdminMenu.factory('myServices', ['$resource', function($resource)…
WagnerMatosUK
  • 4,309
  • 7
  • 56
  • 95
1
vote
1 answer

Cannot get rid of FOUC on my website

I am struggling with a flash of unstyled content on my website. When first visiting it you see the unstyled content before it is actually loaded on to the screen: You can see for yourself here: http://galaxynode.com I am not fluent in html so I need…
Stephen Smart
  • 11
  • 1
1
vote
2 answers

Unstyled text flashes before page fully loads in Firefox

I have a web page which loads inside of a JQuery UI Dialog. When the page loads in Firefox, the plain text appears for a second before all the css and javascript runs. Once everything loads, the text appears properly. Is there a way to prevent the…
user2387503
  • 31
  • 1
  • 8
1
vote
2 answers

display: none applies slow after page load

I have a page with error message hidden using display: none; When page loads, the error message was shown briefly and then went away. It seems ccs applies slowly to the page. How can I improve the user experience and not allow the error message to…
user2251102
  • 13
  • 3
1
vote
2 answers

Why is Javascript causing FOUC

I'm working on a site that has a lot of Javascript and jQuery--as far as I can tell most of it is triggered to load after the document is ready. However, when the page loads you get about a second of white FOUC. But if you disable Javascript…
brentonstrine
  • 21,694
  • 25
  • 74
  • 120
1 2 3
4
5 6 7