1

I've been stuck on this for 2 days now, so I think it's time for a SO question.

I recently upgraded my Bootstrap from 2.0.4 to 2.1.0 in my Rails app via Sass-Twitter-Bootstrap. Locally, everything looked just fine. I made a few minor mods here and there, but saw no serious issues. So, I pushed to Heroku, compiled the assets, and loaded up the site in Chrome and Firefox. Great, perfect, everything looked good. Until I tested in IE9. IE9 loaded up what appears to be a partially compiled application.css. When I view the application.css in Chrome, it looks great, but IE cuts it off at what appears a random point. During asset compilation, I get no errors, so it appears to be some issue IE has with the final, compiled application.css, as it always seems to halt the rendering of the CSS at a random point in the Bootstrap CSS. For example, if I view the application.css in IE's Developer Tools, it claims the CSS ends right after the Bootstrap Sass model component (the application.css.scss has a lot of scss files left to import at that point). Chrome's developer tools shows the entire compiled CSS file, and if I navigate directly to the application.css file in IE, it also downloads the entire CSS file.

I have verified it is some issue with the upgrade to Bootstrap 2.1.1, as if I rollback to before the upgrade, everything works as usual in all browsers. I tried switching to the bootstrap-sass gem, hoping it would magically fix things. It did not. If I remove the Bootstrap component where the application.css seems to halt rendering at in IE (the modals.css.scss file), it simply stops its rendering at the next CSS component in the bootstrap.scss file. This process seems to continue for every SCSS component I pull out, so it seems nearly impossible to pinpoint an exact line of CSS that would oddly be causing this problem. IE just seems to want to give up on rendering the CSS at a specific point.

I'd provide some config, but I'm not sure what really to provide at this point, so feel free to request anything. Any input or guidance would be much appreciated, as I'm just now lost on what to try...and that rarely happens.

jhdavids8
  • 381
  • 3
  • 9
  • Did you try precompiling assets, clearing ie9 cache? – hajpoj Sep 15 '12 at 16:50
  • Yep, tried it all. It appears it was an issue with the port of Bootstrap to Sass, my specific Rails config, and IE. I converted my use of Bootstrap to just use the LESS taken directly from the Bootstrap official repo, and all was good. Sucks because I was using the Bootstrap mixins in my own Sass everywhere, but at least everything works again – jhdavids8 Sep 16 '12 at 16:22

1 Answers1

0

I'm having the same issue with a rails project using foundation gem. So I guess it is related with some sort of limit that only internet explorer handles see this question for more info Internet Explorer's CSS rules limits I solved my issues using this gem https://github.com/zweilove/css_splitter

Community
  • 1
  • 1
Oscar Siniscalchi
  • 43
  • 6