rgba() not working in IE8

Question

I just stuck up with the RGBA() manipulation in jQuery using IE 8

So far i have this:

$('.set').click(function (e) {
      var hiddenSection = $('div.hidden');
      hiddenSection.fadeIn()
      .css({ 'display': 'block' })
      .css({ width: $(window).width() + 'px', height: $(window).height() + 'px' })
      .css({ top: ($(window).height() - hiddenSection.height()) / 2 + 'px',
           left: ($(window).width() - hiddenSection.width()) / 2 + 'px'
       })
       .css({ 'background-color': 'rgba(0,0,0,0.5)' })  //Problem here in IE8
       .appendTo('body');
       $('span.close').click(function () { $(hiddenSection).fadeOut(); });
});

It works in all other browsers, Don't know why its failing in IE 8 I got this error!

Invalid property value in jquery.min.js.

Any help is greatly appreciated!

Thanks

Answer 1

Simple answer: IE8 does not support RGBA properties. It only knows about RGB.

RGBA support was only added in IE9.

Other very old browsers may also not have support for RGBA. However, there aren't many browsers that old that are still in use other than IE8.

There are some ways you could work around this:

• Use a polyfill such as CSS3Pie. This will allow you to specify RGBA background colours in your CSS. You still won't be able to use it directly in JS code as you have it, but you could change the class to deal with it.

• Use a tool like Modernizr to detect whether the browser supports this feature, and provide different functionality if it doesn't.

• Use IE8's -ms-filter style to achieve the transparency effect. This allows you to set a range of special effects, including opacity. This is a non-standard IE feature, and is replaced by standard CSS in IE9/10, but is still useful for in certain cases for old IE versions.

• Use a small PNG image with an alpha channel as your background instead. Bit of a shame to be using a background image for a plain colour background these days, but it will achieve the result you're looking for in all browsers.

Answer 2

`rgba isnt supported by ie8.

However, there is a trick for transparency in i.e8

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#7F000000,endColorstr=#7F000000);

First 2 digit of #7F000000 are opacity and the next 6 digits are hexa color code.

7f is the equivalent of 50%

So your code should look like :

.css({ 'background-color': 'rgba(0,0,0,0.5)' })  //Problem here in IE8
.css({'filter' : 'progid:DXImageTransform.Microsoft.gradient(startColorstr=#50000000,endColorstr=#50000000);'}) //IE Fallback

Sources : http://css-tricks.com/rgba-browser-support/

Edit : After Derek Henderson comment, I will not write the code but if you want to add that still only when it'S IE8, check jQuery.browser