Asset helpers don't compile in Microsoft filter statements #37

Closed
mbaumbach opened this Issue Sep 1, 2011 · 6 comments

Projects

None yet

4 participants

@mbaumbach

The title may be a bit specific, but this is the only case I've tried. I imagine this could potentially happen in other cases too. I've been using Fancybox (Fancybox.net) and they have some IE filters. While trying to convert the file to use assets, I hit this bug:

.fancybox-ie6 #fancybox-close {
    background: transparent;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=image_path('fancybox/fancy_close.png'), sizingMethod='scale');
}

I converted the file to have an scss ending and other image_paths are working fine, it's just the ones in this hacky IE filter stuff. I imagine this is falling outside of some of the parsing rules, but I haven't looked at the sass/sass-rails code yet.

Just to note, this is running on Rails 3.1 final.

@mbaumbach

Simple workaround is to obviously append "erb" to the filename and just do those files using Ruby's helpers, but that just feels dirty. :)

@chriseppstein
Collaborator

This is not a bug (and if it were it would be a bug against sass, not sass-rails :P)

The filter syntax is not actually legal CSS syntax. As a result the Sass parser has a hack in place where it basically escapes the value of the filter attribute instead of parsing it like it does the other properties. As such, you need to interpolate any scripting with #{...} as you would in selectors or property names:

.fancybox-ie6 #fancybox-close {
    background: transparent;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=#{image_path('fancybox/fancy_close.png')}, sizingMethod='scale');
}
@mbaumbach

Thank you, I was looking through the code in sass-rails and didn't see anywhere I could apply a patch, so my next target was going to be Sass. :)

I think this is fair though, as illegal CSS syntax shouldn't necessarily be supported, but I'm sure that will be fought over the more Rails 3.1 becomes standard. :)

@chriseppstein
Collaborator

there's not much to fight about. MS has changed the filter syntax in IE9+ to use strings instead, and you have to use #{} interpolation in sass strings, so there's not really any point in supporting the legacy syntax with anything more than we have already.

@zanedev
zanedev commented Apr 11, 2014

I found this to be a good solution, using a mixin: http://dontwakemeup.com/ie8-backgroundcover-fallback-and-rails/

@dougfarre

Why is this closed? This is still broken for me.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment