IE Background RGB Bug

Using RGBa for progressive enhancement is getting more and more popular, which is awesome. Even nearly a year ago it was pretty much ready to rock. A great way to handle the progressive enhancement part is just to declare a fallback color before the RGBa value, so older browsers that don't support it will get a solid color version:

Using the background-color property only, it will fail and display no background color at all.

The above image is from IE 7. Using the shorthand (top) succeeds while the non-shorthand (bottom) fails.

Solution

Using RGB for a fallback is nice. It's no-brainer work because all you have to do is duplicated the RGBa value, remove the "a" and remove the 4th (opacity) parameter. If you want to keep using RGB as a fallback, just remember to set it using shorthand (if possible), or set the fallback using regular HEX codes or keywords.

In the example, the result of 50% red is a light red anyway, so using a hex code to specify that value might be a more appropriate fallback color anyway.

Unfortunately it doesn’t fix IE’s native rgba( ) or rgb( ) abilities, I wish that were the news. Although Sam’s comment may, haven’t tried it yet.

However, this article is just letting you know that you using the “background-color:” command does not work as a fallback for rgb( ) color at all in IEs 6 & 7. Using “background-color: rgb( XX, XX, XX );” fails at the moment, and I don’t know why.

Chris’ first article doesn’t use that, it uses simply “background:”, but I had other styles on the code I was working on and “background-color:” wasn’t working in IE 6 & 7. I was confused when they did not behave the same way (like Chris mentioned, “background:” would appear simply shorthand for all the “background-*” properties.

Has anyone heard of a solution to this bug (other than conversion to hex, which is decidedly pretty simple anyways) or know why it exists?

AFAIK, there are none. It’s just another way of doing things. I think that everyone’s excitement about RGBA() (which gives you that sweet, sweet alpha ability) is just spilling over into RGB(), which really doesn’t have advantage over using a hex value.

I too got the impression that all the cool kids were using RGB these days instead of hex and spent quite some time trying to figure out the advantage. And as far as I can see, there isn’t any.

That should be evident. I believe what Chris is stating here is that you will have to forego the transparency but preserve the color using the hex. Pretty standard workaround when considering IE all things considered.

It’s so strange it doesn’t work on IE. However this is not some strange CSS property that nobody use in practice. Maybe because the # notation is mostly used, the rgb() problem on IE is caught so late!

Presume ‘background-color’ works for all current browsers – including IE – so why need to fix ‘background’? Unless there’s something I’m missing here…which is likely! I know it’s shorter but does it make all that much difference?

Well using the shorthand RESETS other values that may already be set. So if you had set the background-image of an element (either with background-image or with shorthand), and then on :hover you changed the color with background: whatever;, the image would disappear. You would need to use background-color instead to ensure that the image didn’t get overridden.

So the bug is: any time you use two background attributes for the same CSS selector AND the second attribute is background-color and you use rgba, IE chokes and sets the background color to transparent.

Better browsers ignore the rgba() syntax that they don’t understand, but IE misinterpretsbackground-color: rgba(whatever); as transparent

It doesn’t matter what syntax you use for the fallback color (rgb, hex, or keyword) they all don’t work in IE6-7. You get a transparent background in IE, but things fallback properly in Opera 9 or Camino 1.6 (that also don’t support rgba()).

But change the second declaration to the background shorthand, and suddenly it works at the cost of possibly overriding all other background images/position.

This works (fallback is only background-color and note that rgb syntax DOES work):

As Kyle noted above, switching the order of the declarations and using !important also works, inexplicably, and you can use whatever syntax. You can’t just add !imporant; you have to also switch the order of the attributes. So this works: