开发者

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 @import for additional CSS to <link>
  • Switching concatenation on and off
  • Removing CSS files from the concat, one at a time
  • Switching the local cache off in Firefox
  • etc

Our previous release never exhibited any FOUC issues, so it's something we've done to this release. Changes we've made so far include:

  • Using Base64 encoded images over Data URIs for all decorative imagery, served via CSS.
  • Separating 'framework'-related CSS files from page-specific CSS and bundling them as two separate CSS files

To recreate the problem... use Firefox 3.5.x or 3.6.x, then:

  1. Head on over to: http://my.publisher-subdomain.env.yola.net/
  2. Login with username: 'stack@yola.com' and password: 'stackoverflow'
  3. Once logged-in, you should be at http://my.publisher-subdomain.env.yola.net/sites/
  4. Click the Account link in the main nav.
  5. The Account page should load, and you should see a FOUC. If the FOUC does not occur, clear your cache and reload the page.

Your help would be greatly appreciated! :)

UPDATE:

The dev environment is still exhibiting the FOUC, but only if FireFox is running low on memory or has a lot of extensions installed. Latency and rendering speed definitely affect the visibility of this FOUC.


Although this is a very old question, I found it when I was searching for a solution to the same problem. So, I wanted to post the solution for future reference. I just needed to move the reference to my CSS files above the references to external Javascript that needed to be in my header.


I can be wrong, but this could be a concurrent connections issue. According to my Firebug's "Net" tab

Flash Of Unstyled Content (FOUC) in Firefox 3.5+

the HTML page simply takes a lot of time to load - maybe also because it is on a development server? - and the style sheet gets loaded after the HTML page.

I can't claim to entirely understand what's happening here, but I would try putting the style sheet onto a different domain as a first measure. That should make Firefox establish a connection straight away.

It would probably also be a good idea to go back to normal images instead of data: URIs - that would reduce the size of the style sheet, and data: URIs won't work at all in IE < 8.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜