Fixing IE gradients with Rails 3.1 and SCSS

I kept getting my CSS gradients in IE 9 messed up by the Rails 3.1 Asset Pipeline. The symptom was that the colors were off - way off! Like purple instead of white or gray.

It took me several hours to get this to work, so I figured I'd share the solution.

The colors were off because IE's progid:DXImageTransform.Microsoft.gradient filter doesn't understand normal CSS colors like 'white' or '#fff'. It needs to have them fed just so.

At first I thought it was the YUI compressor that changed the value, but YUI actually has special handling of IE filters. SCSS is supposed to have the same, but it didn't work for me.

Compass has a solution, which includes a custom helper method, ie-hex-str.

So I imported that, and changed my filter to use it.

But getting my own custom SCSS helper function to work and be called too quite a bit of tweaking. Most of the time it was just being ignored, and I saw ie-hex-str(xxx) in my output.

The result is this SASS helper file, dropped into config/initializers:

and this mixin.css.scss

See the entire gist here.



Hey Calvin, just wanted to thank you for this -- it seriously saved me hours of rgba-conversion work and it's nigh impossible to find a non-Compass solution for it. Cheers!
Hey there! Thanks a lot for this amazing plugin - saved me a lot of time! Couldn´t get the light gradients to work properly in IE...
By Axel Ferdinand on Thu, Nov 01, 12 at 08:03 · Reply
Saved my day!
By akegalj on Mon, Mar 18, 13 at 06:09 · Reply

Leave a comment