IE Background RGB Bug

Avatar of Chris Coyier
Chris Coyier on

Take your JavaScript to the next level at Frontend Masters.

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:

div {
   background: rgb(200, 54, 54); /* The Fallback */
   background: rgba(200, 54, 54, 0.5);
}

The above works just fine, however Dan Beam alerted me to an interesting bug/quirk with this in IE 6 & 7 (fixed in IE 8). See example.

The situation is that the RGB fallback color only works when using shorthand. If you were to declare the fallback color like this:

div {
	background-color: rgb(255,0,0);
	background-color: rgba(255,0,0,0.5);
}

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.

div {
  background-color: #fd7e7e;
  background-color: rgba(255,0,0,0.5);
}