IE8 chokes on compressed CSS (Rails) - ruby-on-rails

Like the title says, I'm having a problem with IE8 and compressed CSS. IE8 looks totally jacked up. (Using Rails 3.1 with asset pipeline)
At first I though it was the IE 4095 bug. It turns out I only have 1034 selectors.
In production, and also after running bundle exec rake assets precompile locally CSS began to break.
Out of curiosity, I decompressed the CSS Rails / Sprockets / Asset Pipeline spit out ..
IE didn't break on the un-compressed version.
Seems as though IE8 can't handle the giant compressed file.
I put a ticket in to see if there is an option to output both a compressed and uncompressed version, then conditionally load the uncompressed to IE.
In the meantime, I'm going to try to just turn off Rails compression for the moment.
config.assets.compile = false
// in development.rb
bundle exec rake assets precompile
// assets COMPILED anyway. agghhh!
Sort of out of ideas. Any suggestions welcome!
Thanks!
Edit
Based off this script, I started writing Middleware that serves uncompressed
CSS to IE8.
I've gotten pretty far, but noticed a lack of Ruby Gems that decompress CSS.

I use the sass-rails gem for CSS compression.
Then in production.rb:
config.assets.compile = false
config.assets.compress = true
config.sass.style = :compressed
config.assets.compile is not doing what you expect. This actually means on-the-fly compilation, not pre-compilation. config.assets.compress is what you are looking for.

I had the same issue. The only work around is to break out your compressed javascript into more than one file. I ended up breaking up my scripts into two different compressed files. This fixed the issue.
Hope that helps.

Related

How to display loaded CSS/JS Rails assets in production as is in development mode?

When I open my Rails app and display the generated HTML code, I see there every single CSS file that is loaded.
In production mode I see only on application.css file where is everything.
How to display the same statement that is in the development mode also in production?
The reason why I want to do that is, that the CSS structure of the application looks differently on my localhost and on Amazon AWS. I prepared all CSS for the app locally, where was everything pixel-perfect prepared, but when I deployed the code to AWS, the app looks different - font (from Google fonts) is bigger (although I see there is used the same size), the same for some DIVs... don't know how to figure this out, so trying to inspect all loaded CSS files.
Your have to disable asset pipelining from config/environments/production.rb
config.assets.enabled = false
First did you compile the assets during Deployment
Please read the docs
http://guides.rubyonrails.org/asset_pipeline.html
For development style css files
You might want to set these
config.assets.compress = false
config.assets.debug = true
NOTE: Dont use these permanently its just to start with asset pipeline or debug

rake assets:precompile every time I edit CSS?

When I looked at the HTML source for my main page, the CSS that Rails was linking to was in /stylesheets/application.css. When I tried to click that link, I would get a 404 not found error from Passenger (Apache).
So what ended up working was setting config.assets.compile = true in my config file and running rake assets:precompile. This then changed the CSS link to something like /assets/application-5310fa2adccd74453c084cf221eaeeef.css, and this was something I could click on and could be found.
So now what I'm doing is every time I edit my CSS file, I run precompile. Is this the correct way to do things? Do I really have to call this every time I edit my CSS file? Is this the purpose of precompiling, to make sure my assets are able to be served by Apache?
When you are running your application in production mode, it is advised to precompile the static assets to enhance the performance.
But if you want to skip it, you can use
In config/environmets/production.rb
config.assets.compile = true
After this, you don't need to precompile assets after any change in css but it can slow down the performance and speed of your page load.

Cannot configure assets via pipeline on local production rails 3.1.3 server

This month, I upgraded from Rails 3.0 to Rails 3.1 - this week I tried to launch the server in production mode - today I have hit a wall !
I am unable to get my production environment server to serve up my public assets (JavaScript and CSS) via the asset pipeline, unless I set config.assets.compile = truein my environment.rb file, which for speed reasons I obviously don't want to do.
I have a large number of JS and CSS files, each of which tends to get used on one or two different pages. This means creating a single "manifest" file doesn't fit my usage, as each page wants something slightly different. I also expect some of the CSS won't sit together nicely. Therefore I have gone down the approach of "just get it working", looking to tidy up the large quantity of CSS / JS later.
Here is the production.rb file:
Implicit::Application.configure do
...
config.consider_all_requests_local = false
config.action_controller.perform_caching = true
# I set this to true, as I am testing this locally, just running a local Thin server
config.serve_static_assets = true
config.assets.compress = true
# Setting this to false removes the issue - but is SLOW
config.assets.compile = true
config.assets.digest = true
# This is overkill - but does get EVERYTHING precompiled for now
config.assets.precompile += %w( *.css *.js )
config.action_dispatch.x_sendfile_header = nil
...
end
This is quite a new area for me, and so I've spent much of today toggling these booleans and stop/starting the local Thin / Rails server to try them out. But the only value that's made a solid difference is the compile flag.
My application.rb file is pretty much standard, and has config.assets.enabled = true and config.assets.initialize_on_precompile = false in it, the latter from a heroku post (and a guess, again).
I have a fully populated public/assets directory, created with the bundle exec rake assets:precompile command, that takes about 20 mins to run on my oldish laptop (5 years), probably something to do with that "catch all" precompile regex, although with that line commented it still takes over 10 mins (!)
With the compile flag set to true, I can see copies of these assets getting created in my /tmp/cache directory - this is clearly the application creating it's own "compiled copy" of the assets.
With the compile flag set to false, I am confronted with the error message (in the logs, unless I set requests to local, then I see it on the rendered error page) of jquery.reveal isn't precompiled. However, when I go to http://localhost:3000/assets/jquery.reveal.js the javascript file is served up.
The line of my application layout causing this is:
<%= javascript_include_tag "application", "jquery.reveal" %>
I have tried changing that jquery.reveal to jquery.reveal.js with no change. Removing it fixes the index page, except that the jquery.reveal functionality is gone of course ! So clearly the application.js is being served up correctly. I just can't figure out why jquery.reveal isn't, as I can see the precompiled files in the public/assets directory.
This is an interesting issue, and I think there may be two bugs - the one you've linked and another: the file is being being compiled to the wrong name. It might be worth trying to generate a minimal test case that you can submit with a bug report.
The workaround for this - and I suspect that this is why few people seem to have the problem - is to use a secondary manifest (linking libraries only via a manifest seems to be an evolving best-practice).
Create one called home.js and require just that one file to it.
This isn't a bad approach overall. These extra manifests have to be added to the precompile array (see the guide), and allow multiple libraries to be shared over several pages or sections without having to link them each time.
Answering my own question here, but looks like it might be a bug in parsing assets with "periods" such as jquery.reveal
An issue report (https://github.com/rails/rails/issues/3398) reports this and highlights a commit (https://github.com/sstephenson/sprockets/commit/4ba5b32764a9073671df5e77355df6ed2bb3d3c9) which occurs just after Sprockets 2.0.3 - the default version that rails 3.1.3 relies upon. Upgrading Sprocket would therefore involve moving onto 3.2-stable rails - a bit bleeding edge for this newbie !
But the bug report does say this only occurs when config.assets.compile = true - and I did see whilst that was the case in my code that jquery.reveal was being dynamically compiled to jquery-8fu...8g.reveal.js (instead of jquery.reveal-8fu...8g.js).
So perhaps this ISN'T the answer. At least I hope it isn't. But will certainly continue to look at this period issue, as the "non-period" containing CSS / JS files are being served up just fine, as far as I can tell.

When are compiled assets being cached in rails

When I precompile my assets for a rails 3.1 app with rake assets:precompile it spits out an old cached version if nothing changes in the asset files. I can tell because my erb is making use of a constant that I was trying to change elsewhere in my app. One work around is to alter one of the css files (eg by adding a space etc) before re-precompiling but this is a pain and I would like to try and disable this caching if it is possible. Any ideas???
This is the expected behavior of the pipeline - the ERB is evaluated only once when you precompile. The value at compile time is the value you get in the file.
The caching is based on the checking the timestamp of the files. You could run Sprockets in production without precompiling (this is called live compiling), but you cannot turn off the caching because the performance would be dreadful - every single request would require Sprockets to recompile all the files.
Sorry :-(

Rails 3.1, asset pipeline: no route matches

This question is similar to Why do I get “no route matches” for requests to the asset pipeline?.
I have a rails 3.0 application that I upgraded to 3.1 and converted to use the new asset pipeline (thanks to RailsCasts #282 and #279).
In production mode, I'm seeing the application-<digest>.js and application-<digest>.css. Great! And if I look at the source of those files, I see they are compressed. Yee-haw! So that means the asset pipeline is working, right?
However, if I add ?debug_assets=1 to the URL so that I may view individual files, some of them are producing ActionController::RoutingError (No route matches [GET] "/assets/<filename>-<digest>.js"), and same goes for some CSS files. But not all, just some, and I can't figure out what makes some files do this and others not.
I've cleared out tmp/cache/* and restarted Passenger. I've bumped config.assets.version. I've restarted memcached. None of these seem to resolve it. But what's odd is this only comes up when I'm using ?debug_assets=1 in the URL; without it, I see just one JS and CSS file, all compressed and minified.
I don't use precompiled assets, by the way. But just for grins, I performed a rake assets:precompiled, and whaddya know? The ?debug_assets=1 now shows all JS and CSS files, and none of them are 404'd.
So I guess the question you might have is, "Why not just use precompiled assets and not worry about missing assets from lazy load?" Good point. Answer: I just like to make sure I understand what I am doing, what's happening, and that I'm doing things correctly.
application.rb:
config.assets.enabled = true
config.assets.version = '1.2'
production.rb:
config.assets.compress = true
config.assets.compile = true
config.assets.digest = true
config.assets.js_compressor = :uglifier
config.assets.css_compressor = :scss
development.rb:
config.assets.compress = false
# I keep this off during development because I want
# to make sure the compression isn't breaking my JS
config.assets.debug = false
If you precompile your assets and set compile to false, debug is disabled because you've told Rails to not use Sprockets at all, but assumes that the files can be served by nginx based on mappings in the asset pipeline manifest.
When compile is true (like you have) then requests for these assets (and the debug request) are sent back to Sprockets to be processed if the files are missing (which without being precompiled is the case).
I would have assumed Sprockets would serve the individual files for each digested name. This behavior sounds buggy to me, although I don't think it is intended to use debug in production anyway.

Resources