Why does my CSS go screwy "sometimes"

Question

A website of mine is behaving weirdly. The layout sometimes is fine, and sometimes it is screwy. An example page that I see the problem on is this one: link

Disclaimer: I have yet to start my investigation into cause in earnest. I am turning to Stackoverflow because I am lazy and I hope someone will say "That happened to me once, it is probably this...". So please, no one get stuck into this working out this issue if it is something you have never seen before, as it wouldn't be fair as I have not done it myself.

Ok, some background:

• The problem usually (maybe always) occurs when first viewing the page
• The problem does not show up always, only sometimes
• When the page shows up munged, if you refresh it usually reloads looking as it should
• The site is a rails app
• The css is passed through the neat Smurf Gem, which automatically minifies the CSS and Javascript on the page.
• The layout problems happen in firefox (both linux and winXP)
• The CSS is served up in the production environment using the ":cache => true" option which concatenates all the css files into one file

Anyway, I am hoping that this has happened to someone before and it will be really simple to fix. If not, I'll go and investigate and return with the solution (or a request for more help).

Thanks in advance!

James.

[edit]I added the first two bullet points, inspired by the comments and first answer[/edit]

Answer 1

I had such a problem. The problem was only at the first time the page was loaded. Just reload it and it was fine. The problem in my case was that the images where not there in the cache for the first time so the browser didnt know it's dimensions when preparing the page which caused the problem

Answer 2

If an image doesn't have a height/width assigned to it, a place is created on the page and it's put there. If the image doesn't quite fit, the browser may not know this until it's refreshed. Then it already knows the size and can properly fit it onto the page.

Answer 3

We have had something similar when using HAML and SASS that resulted in the CSS being completely unavailable. It only happened on deploys. We determined it was a combination of the Rails stylesheet merging and the generation of the CSS from SASS. Sass was not done generating the CSS, which it did so on the first request to the application, when Rails attempted to merge it all together. The result, a corrupt useless CSS file. Then we stumbled upon this article which has a solution for preventing this issue.

Based on all this, my best guess is that the Smurf gem is attempting to generate your file on the first request, but Rails is serving it out before its done. The generation completes then each following request is fine. If this is the problem then the only solution i know of is to get the file generated before the first request. Of course, this does assume that it is related to deployments or application restarts in some way.

Peer