css rendering problem on IE8-9 #14

Closed
bbenezech opened this Issue Nov 29, 2011 · 18 comments

Comments

Projects
None yet
3 participants
@bbenezech
Contributor

bbenezech commented Nov 29, 2011

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

This comment has been minimized.

Show comment
Hide comment
@thomas-mcdonald

thomas-mcdonald Nov 29, 2011

Member

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.

Member

thomas-mcdonald commented Nov 29, 2011

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

This comment has been minimized.

Show comment
Hide comment
@bbenezech

bbenezech Nov 29, 2011

Contributor

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

Thanks Thomas!

Contributor

bbenezech commented Nov 29, 2011

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

Thanks Thomas!

@thomas-mcdonald

This comment has been minimized.

Show comment
Hide comment
@thomas-mcdonald

thomas-mcdonald Nov 29, 2011

Member

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

Member

thomas-mcdonald commented Nov 29, 2011

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

@thomas-mcdonald

This comment has been minimized.

Show comment
Hide comment
@thomas-mcdonald

thomas-mcdonald Dec 2, 2011

Member

I think I've got this fixed now.

Member

thomas-mcdonald commented Dec 2, 2011

I think I've got this fixed now.

@thomas-mcdonald

This comment has been minimized.

Show comment
Hide comment
@thomas-mcdonald

thomas-mcdonald Dec 2, 2011

Member

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.

Member

thomas-mcdonald commented Dec 2, 2011

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

This comment has been minimized.

Show comment
Hide comment
@bbenezech

bbenezech Dec 8, 2011

Contributor

Sup, bro.

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

Contributor

bbenezech commented Dec 8, 2011

Sup, bro.

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

@thomas-mcdonald

This comment has been minimized.

Show comment
Hide comment
@thomas-mcdonald

thomas-mcdonald Dec 10, 2011

Member

Give me an hour, go go go go go.

Member

thomas-mcdonald commented Dec 10, 2011

Give me an hour, go go go go go.

@thomas-mcdonald

This comment has been minimized.

Show comment
Hide comment
@thomas-mcdonald

thomas-mcdonald Dec 10, 2011

Member

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.

Member

thomas-mcdonald commented Dec 10, 2011

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

This comment has been minimized.

Show comment
Hide comment
@thomas-mcdonald

thomas-mcdonald Dec 10, 2011

Member

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.

Member

thomas-mcdonald commented Dec 10, 2011

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

This comment has been minimized.

Show comment
Hide comment
@bbenezech

bbenezech Dec 13, 2011

Contributor

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.

Contributor

bbenezech commented Dec 13, 2011

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

This comment has been minimized.

Show comment
Hide comment
@rwjblue

rwjblue Dec 22, 2011

Contributor

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."

Contributor

rwjblue commented Dec 22, 2011

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

This comment has been minimized.

Show comment
Hide comment
@rwjblue

rwjblue Dec 22, 2011

Contributor

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.

Contributor

rwjblue commented Dec 22, 2011

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

This comment has been minimized.

Show comment
Hide comment
@thomas-mcdonald

thomas-mcdonald Dec 22, 2011

Member

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.

Member

thomas-mcdonald commented Dec 22, 2011

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

This comment has been minimized.

Show comment
Hide comment
@rwjblue

rwjblue Dec 22, 2011

Contributor

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...

Contributor

rwjblue commented Dec 22, 2011

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 pushed a commit to rwjblue/bootstrap-sass that referenced this issue Dec 23, 2011

@bbenezech

This comment has been minimized.

Show comment
Hide comment
@bbenezech

bbenezech Dec 23, 2011

Contributor

Cross posted there: nex3/sass#231

Thanks @rjackson for the investigation.

Contributor

bbenezech commented Dec 23, 2011

Cross posted there: nex3/sass#231

Thanks @rjackson for the investigation.

@thomas-mcdonald

This comment has been minimized.

Show comment
Hide comment
@thomas-mcdonald

thomas-mcdonald Jan 17, 2012

Member

Consider this fixed. Finally.

Member

thomas-mcdonald commented Jan 17, 2012

Consider this fixed. Finally.

@bbenezech

This comment has been minimized.

Show comment
Hide comment
@bbenezech

bbenezech Jan 17, 2012

Contributor

Let's party. 🍰 🍸

Contributor

bbenezech commented Jan 17, 2012

Let's party. 🍰 🍸

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