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

Laravel website with boostrap4 : FOUC on pages using container-fluid

Building a website with Laravel5 and Bootstrap4. I'm getting a FOUC with a brief width of my page at 1/5 of width before expanding to real width. The reason seems to be attached to how i use container-fluid. I am using 'container-fluid' as i want to…
LearningPath
  • 612
  • 5
  • 17
0
votes
0 answers

best practice to initialize JavaScript for DOM elements above the fold

Suppose you have some kind of listing and you allow this listing to be rendered via CSS either as a list or as a grid (via a varying CSS class or data attribute). Since this is purely a rendering issue it required not (re)processing by the web…
fritzmg
  • 2,494
  • 3
  • 21
  • 51
0
votes
1 answer

Preventing FOUC when calling CSS through a javascript

I have a webpage which I have altered from a template. I am suffering from FOUC (Flash of Unstyled Content). I have tried a solution from here:…
Jason Rogers
  • 667
  • 1
  • 6
  • 19
0
votes
0 answers

Loading ui-view content before rendering rest of page content

I have a header and a footer which are pure html and a div between which loads all my views using ui-view, so it looks something like this:
My page loads up…
Vishal Rao
  • 872
  • 1
  • 7
  • 18
0
votes
0 answers

Remove the flash of unstyled content (FOUC) with Atom

I've always experienced annoying fouc with Atom on my MacBook Pro 13" (i5) which made me comeback to sublime text. I recently got myself a brand new MacBook Pro 15" (i7). And I still experience the same issue ! All I could find about it was this…
Radioreve
  • 3,173
  • 3
  • 19
  • 32
0
votes
1 answer

I Have a DNN website, i want to prevent FOUC on it

Problem: I Have a DNN website, i want to prevent FOUC on it. I created a Zurb Foundation skin, every time the page loads there is a Flash of unstyled content(FOUC), such as the menu showing all the drop-downs for a few seconds. After many searches,…
j.e
  • 65
  • 4
0
votes
1 answer

jquery image fader, flash of unstyled content

www.mymediaventure.com i can't stop the images flashing up before they are put on top of each other and then the fader starts. at the moment, im setting display to none in an inline style attribute on all but the first image. then in the jquery im…
Alex B
  • 1,009
  • 3
  • 18
  • 26
0
votes
0 answers

Will flash of unstyled content (FOUC) occur if link tags are in the head?

My understanding is that the link tag is synchronous: Are LINK elements loaded synchronously? If so, FOUC should only be a problem for CSS that is in link tags below some content. Is that true?
Adam Zerner
  • 17,797
  • 15
  • 90
  • 156
0
votes
3 answers

Prevent fouc in firefox and ie

I'm trying to prevent FOUC in FF & IE. Loading my css async, (understandably) causes it. Setting a function to hide and then show the body works on Chrome, but not IE/FF. I've tried every solution shown online, which are supposed to work and none…
user4812105
0
votes
2 answers

Using Chrome Dev Tools to find out what's causing FOUC

I have been fixing up a sites JS, moving it to the bottom, minifying, etc. And it's all gone okay except on the blog (of an e-commerce site), as the page loads it's causing the header to be un-styled for a second or so, but it isn't happening on any…
evu
  • 1,031
  • 2
  • 10
  • 29
0
votes
1 answer

Flash of unstyled content

I've got a page with some content pulled down from a database in the body, up in the head i've got an external style sheet linked to format that content. On Safari (doesn't seem to happen on Chrome or Firefox) i'm getting a lovely flash of unstyled…
Crizly
  • 971
  • 1
  • 12
  • 33
0
votes
1 answer

How to remove FOUC in wordpress site

I have a development site I'm building on wordpress (a href="http://scottmcrae.thecrossagency.net/">dev site here, using DRY theme (original theme here). The original theme had a preloader - I disabled it because the site took longer to load with it…
ziirahdane
  • 5
  • 1
  • 4
0
votes
0 answers

Hiding AddThis buttons with jQuery until rendered in responsive design

I've been working on a responsive redesign and I'm trying to reduce the layout shift and flash of unstyled content that occurs when my AddThis follow buttons are rendered on the page after being inserted by a Modernizr query. Depending on the media…
Ian
  • 509
  • 12
  • 36
0
votes
1 answer

Javascript Loading Order – Prevent Page Jumpiness

See how this page loads its content for a while, then triggers the javascript after some delay? http://nomoresnoring.com/new/ How can I make things load more smoothly? Should anything be reordered? Header:
pianofighter
  • 85
  • 1
  • 2
  • 8
0
votes
1 answer

Div appears before javascript gets rendered

I'm using a script called Viral gate, it is utilized to unlock a content inside a div after someone clicks on Facebook Like Box, the only problem is that the div comes before the script, so when the page is loading it appears before the script gets…
user1096494
1 2 3 4 5
6
7