Rails 3.1, assets pipeline and IE 6 & 7 in product

Question

Trying out my Rails 3.1 app in production mode ( Debian 6, Ruby 1.9.2, Passenger). I tried it out using IE 6 & IE 7 and some of the assets are not loaded properly. Everything works fine in dev mode.

Some css & js are not loaded properly, thou all the files are being compiled. Specifally I'm having issues with the drop-down ( jquery superfish menu). Everything works fine in IE8, IE 9, Firefox, Chrome both in production & development. The problem only shows up in IE 6 & 7 in Production.

Tried clearing out cache ( both in browser and on the server). Recompiling assets. Nothing sees to help.

Did anyone run into anything - like that?

Answer 1

There is a great module CssSplitter that folks are using to split css files for ie and it has been adapted to be used from the asset pipeline. https://gist.github.com/2398394

Answer 2

Is debug enabled? i.e. are your javascript split when in development mode?

Try disabling it so the asset pipeline merges everything up in the same file and see if it still works in development mode.

I've had a few issues when the assets were merged together and there was a missing semicolon in one of the files. This might be a hassle to find, but might happen. Other better browsers render them ok, but IE just mix things up.

Answer 3

For anyone having the same problem here is the root of the problem from MS Support (http://support.microsoft.com/kb/262161) :

This problem occurs because the following conditions are true in Internet Explorer: All style tags after the first 31 style tags are not applied. All style rules after the first 4,095 rules are not applied. On pages that uses the @import rule to continously import external style sheets that import other style sheets, style sheets that are more than three levels deep are ignored.

ARRRRRRRRRRRRRRR!!! Killed a couple of days trying to track down a problem with my code, when it was MS's non-compliance to standards again!!! #@)(!@#)

This led me to investigate further, and to my amazement IE6 & IE7 seem to process only the first 2025 lines in a big css file - the rest is ignored. ( at first I thought it was a number of lines limitation, but it turns out that it was 4095 rules, that were on the 2025 lines). Just seems plain stupid. Newer IE and Chrome, Safari, Opera and FF don't seems to have a problem with this. I ended up breaking up my css into application-1.css & application-2.css to keep number of the files in produciton to a minimum, but it still very annoying.