Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

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

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

mbaumbach opened this issue Sep 1, 2011 · 6 comments

Comments

@mbaumbach
Copy link

@mbaumbach mbaumbach commented Sep 1, 2011

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
Copy link
Author

@mbaumbach mbaumbach commented Sep 1, 2011

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
Copy link
Collaborator

@chriseppstein chriseppstein commented Sep 1, 2011

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
Copy link
Author

@mbaumbach mbaumbach commented Sep 1, 2011

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
Copy link
Collaborator

@chriseppstein chriseppstein commented Sep 1, 2011

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
Copy link

@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
Copy link

@dougfarre dougfarre commented Nov 4, 2014

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
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
4 participants
You can’t perform that action at this time.