What might cause CSS to fail to load occassionally on all browsers?

Question

I'm working on a webapp, and every so often we run into situations where pages will load without applying CSS. This problem has shown up in IE6, IE7, Safari 3, and FF3.

A page refresh will always fix the problem.

There are 3 CSS files loaded, all within the same style block using @import:

<STYLE type="text/css">
  @import url([base css file]);
  @import url([skin css file]);
  @import url([generated css path]);
</STYLE>

In any situation when we take the time to examine the html source, nothing is out of the ordinary. Access logs seem normal as well - we're getting HTTP 304 responses for the static CSS files whenever they are requested, and an HTTP 200 response for our generated CSS.

The mimetype is text/css for the css files and the generated css. We're using an iPlanet server, which forwards requests to a Tomcat server.

davebug asked:

Is it always the same css file not loading, or is the problem with all of them, evenly?

None of the CSS files load. Any styles defined within the HTML work fine, but nothing in any of the CSS files works when this happens.

Answer 1

Use ab or httperf or curl or something to repeatedly load the CSS files from the webserver. Perhaps it's not consistently serving the pages.

Answer 2

if it happens often enough that you're able to see it in your browser, try intalling the Live http headers Firefox extension or the Tamper Data extension, and watch the response headers as they are seen by the browser.

Answer 3

Examining the headers is a good idea, but I imagine all you will learn from them is that the server didn't respond to a request every once in a while.

I see this happen all the time on the net. Images won't load until you refresh, css is messed up, etc. All of the situations are solved by a refresh.

I imagine one way you could "fix" this, maybe, is by specifying in your cs file a url for an image for some element. Then, on page load in javascript, get that element and see if that image has loaded. If not, then have the page reload itself.

Seems pretty exotic, but that's the only idea I had...

Answer 4

I've had a similar thing happen that I was able to fix by including a base style sheet first using the "link rel" method rather than "@import". i.e. move your [base css file] inclusion to:

<link rel="stylesheet" href="[base css file]" type="text/css" media="screen" />

and put it before the others.

Answer 5

We have seen this problem across a number of sites we manage. We even added analytics calls to track the frequency with which this is happening. We find that it seems to happen about 0.1% of the time (once per 1000 pageviews).

We've even done something similar to Matt's suggestion -- we use Javascript to check if a style is defined for a particular class; if not, we try to load the CSS using a cache-busting URL.

We rarely/never see the problem in the lab, but we occasionally get reports from end users. We've spoken with some, but we've never established a real pattern. We thought it might have something to do with poorly configured caching proxies, but we're not even certain about that.