Rgba () does not work in IE8

Question

I just got stuck on 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, I don’t know why its failure in IE 8 I got this error!

Invalid property value in jquery.min.js .

Any help is much appreciated!

thanks

Answer 1

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

RGBA support was added only in IE9.

Other very old browsers also cannot support RGBA. However, there are not many browsers that are old that are still in use except IE8.

There are several ways around this:

• Use a polyfill like CSS3Pie. This will allow you to specify RGBA background colors in your CSS. You still can’t use it directly in the JS code as it is, but you can change the class to deal with it.

• Use a tool like Modernizr to determine if the browser supports this feature and provides various functions if it is not.

• Use IE8 -ms-filter style to achieve transparency effect. This allows you to set a number 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 in some cases for older versions of IE.

• Use a small PNG image with an alpha channel as the background. It's a bit embarrassing to use a background image for a regular color background these days, but it will achieve the result you are looking for in all browsers.

Answer 2

`rgba is not supported by ie8.

However there is a trick for transparency in i.e8

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

The first 2 digits #7F000000 is the opacity, and the next 6 digits are the hex color code.

7f is the equivalent of 50%

So your code should look like this:

 .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's comment, I will not write code, but if you want to add it only in IE8, check jQuery.browser

Answer 3

You have a typo. It should be:

 rgba(0,0,0,0.5) 

You are missing part "a".

However, I'm not sure if IE8 supports rgba() ... and again jQuery maybe has a wrapper for this?

To be safe, I would try setting the background image in png format with transparency.

 .css({ 'background-image': 'http://example.com/myimage.png' }) 

Miki.

Answer 4

Instead of this:

 .css({ 'background-color': 'rgba(0,0,0,0.5)' }) 

You can do it:

 .css({ 'background-color': 'rgb(0,0,0)', 'opacity': '0.5' }) 

This will work in all browsers.