Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

css rendering problem on IE8-9 #14

Closed
bbenezech opened this Issue · 18 comments

3 participants

@bbenezech

Step to reproduce:

Diffing the CSS output manually, I found out:

less:
progid:DXImageTransform.Microsoft.gradient(startColorstr='#333333', endColorstr='#222222', GradientType=0)

sass:
progid:DXImageTransform.Microsoft.gradient(startColorstr=#333, endColorstr=#222, GradientType=0)

Probably what's causing it.

@thomas-mcdonald

Cheers man, I'll change it to be identical to the less line. Probably me trying to be clever when I was converting the code.

Sorry about not getting back to you on this one, exams in January are slowly drowning me already.

@bbenezech

Arf, no problem. I wasn't sure what was causing it anyway.
Can you bump a release soonish?

Thanks Thomas!

@thomas-mcdonald

Aye, I'm hoping to get a release tonight that addresses all the current issues.

@thomas-mcdonald

I think I've got this fixed now.

@thomas-mcdonald

sigh thinking about it, this could either be the lack of quotes causing the issue, or the use of shorthand colours.

Let me know if the 1.4.1 release has fixed it, if it's the shorthand colours I'll run round and change them and push 1.4.2.

@bbenezech

Sup, bro.

I want the MSDN compliance Gold® Logo on RailsAdmin's homepage, it would enlarge my penis very much.

@thomas-mcdonald

Give me an hour, go go go go go.

@thomas-mcdonald

filter doesn't support the use of named colours, only took me an hour to work it out. fun times. Guess I also have to figure out what's happening to the topbar as well but that's slightly less breaking than those buttons.

Will try and push a new release with the fixes later today.

@thomas-mcdonald thomas-mcdonald closed this issue from a commit
@thomas-mcdonald thomas-mcdonald fix for IE-filter not supporting named colours
Supporting IE7 is more effort than it's worth, surely. should (yet
again) fix #14
f68f42b
@thomas-mcdonald

That should do the trick, according to my Heroku sample application.

Let me know though, I probably won't be able to push any more changes for the next few days (interview at Oxford) but, like I say, there shouldn't be a problem.

@bbenezech

The buttons now look fine, but the toolbar's still broken. (I updated RA demo with 1.4.2 so you can have a look)
Steve Ballmer said I can't have the badge. Bummer.

@rwjblue

Looks like the issue is with sass using the smallest representation for a given color, but IE needs the full value. Per the (Sass reference material)[http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html]:

"Compressed style takes up the minimum amount of space possible, having no whitespace except that necessary to separate selectors and a newline at the end of the file. It also includes some other minor compressions, such as choosing the smallest representation for colors. It’s not meant to be human-readable."

@rwjblue

I am going to look into the SASS compile options to see if there is anything that can be specified inline to prevent #222222 from being abbreviated to #222, but as a quick fix we included the following inline style in the head section of our layout:

<style type="text/css">
  .topbar-fix {
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#333333', endColorstr='#222222', GradientType=0) !important
  }
</style>

Then include the topbar-fix class where needed, this class will then override the incorrect filter that SASS compiled.

It fixes the issue with the topbar gradient in IE 7/8.

@thomas-mcdonald

Yeah, that was the problem I was having with the buttons, SASS will use a named colour representation or a shorthand notation if it can which MS-gradient won't accept.

The solution I had was to knock the blue value down a notch, which has next to no impact on the colour but makes it work. There doesn't seem to be no way of configuring what the default 'format' of the output is, which means we have to make the output in such a way that it can't be shorthanded, or to override it as you are doing. It's evil, but at the same time I see no obvious way around it.

@rwjblue

I found a blog article that may be able to work as a solution:

http://pinds.com/2011/11/30/fixing-ie-gradients-with-rails-3-1-and-scss/

This might make it possible to fix inside of bootstrap-sass itself. I'll try to incorporate offline and see if it works...

@rwjblue rwjblue referenced this issue from a commit in rwjblue/bootstrap-sass
Robert Jackson Fix Microsoft.gradient issue with SASS asset compilation. Resolves #14. 2ae6483
@bbenezech

Cross posted there: sass/sass#231

Thanks @rjackson for the investigation.

@thomas-mcdonald

Consider this fixed. Finally.

@bbenezech

Let's party. :cake: :cocktail:

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.