App & Browser Testing Made Easy

Give your users a seamless experience by testing on 3000+ real devices and browsers. Don't compromise with emulators and simulators

Get Started free
Home Guide Fixing Browser Compatibility Issues with CSS Opacity & RGBA

Fixing Browser Compatibility Issues with CSS Opacity & RGBA

By Mohit Joshi, Community Contributor - October 3, 2022

It’s interesting how some websites have more visually appealing designs than others, especially morphism web designs. The process usually involves playing with CSS opacity and RGBA. It is a common practice nowadays to use the CSS opacity feature extensively on web pages, to make them more user-attractive, for example, on images that become clearer when you hover over them. 

This can be achieved in CSS with the help of opacity property and RGBA color. There is wide use of both methods in the industry, but they come with their consequences. 

Table of Contents

What is CSS Opacity?

CSS opacity is the measure of the content which is hidden behind the element. The opacity property is CSS defines the opacity of an element. It states the transparency of an element, however, a 100% transparent element is invisible, and an element with 100% opacity is visible. The syntax for defining the opacity property in CSS is as follows.

opacity: value (percentage/decimal)

Implementing CSS Opacity property

Now, let’s implement the CSS opacity property using the above syntax.

<html>
<head>
<title> CSS opacity cross browser </title>
<style>
body{
display: flex;
}
div{
flex: 1 1 ;
height: 100vh;
background-color: #11FF00;
display: flex;
justify-content: center;
align-items: center;
}
#one{
opacity: 0.3;
}
#two{
opacity: 60%; //You can use percentage as well.
}
#three{
opacity: 1;
}

</style>
</head>
<body>
<div id="one"><h1>It has opacity 30% </h1> </div>
<div id="two"><h1>It has opacity 60% </h1></div>
<div id="three"><h1>It has opacity 100%</h1></div>
</body>
</html>

Implementing CSS Opacity

In the above, example, the opacity property comes handy, as you can determine the opacity of an HTML element with just one line of code. Also, if you set the value of the opacity outside the defined range, it gets rounded off to the nearest limit point, i.e, between 0 to 1. For example, if you set the value to -0.3, it will round off to 0, which is the nearest limit point, and hence, fully transparent.

<style> 
#one{
opacity: -0.3;
}
#two{
opacity: 0.6;
}
#three{
opacity: 1.5;
}
</style>

CSS Opacity Example

Moreover, in the above example, the opacity property is only applied to the div, however, it automatically gets applied to the h1 element. This is where the opacity property in CSS lags, it automatically applies to the children element when applied to the parent element. This is one of the reasons, we shall learn the next method to apply opacity, using RGBA color.

What is RGBA? 

RGBA stands for Red-Green-Blue-Alpha. The Alpha parameter defines the opacity of an HTML element, however, unlike the opacity property, it does not automatically affect the children of the parent element to which it is applied. The syntax for defining the RGBA property is written as.

rgba( red, green, blue, alpha );
  • Red, Green, and Blue parameters are used to define the intensity of red, green, and blue colors respectively. The value can range from 0 to 255 as an integer value, and 0 to 100 when used as a percentage.
  • Alpha is used to define the amount of opacity, ranging from 0 to 100, where 0 states 100% transparency and 100 states no transparency.

Implementing RGBA for applying CSS opacity

Now, let’s understand how to use RGBA for applying opacity in CSS.

<html>
<head>
<title>CSS background color rgba cross browser</title>
<style>
body{
display: flex;
}
div{
flex: 1 1 ;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
#one{
background: rgba(17, 255, 1, 0);
}
#two{
background: rgba(17, 255, 1, 0.3) ;
}
#three{
background: rgba(17, 255, 1, 0.6);
}
#four{
background: rgb(17, 255, 1, 1);
}

</style>
</head>
<body>
<div id="one"><h1>It has opacity is 0%</h1></div>
<div id="two"><h1>It has opacity 30%</h1></div>
<div id="three"><h1>It has opacity 60%</h1></div>
<div id="four"><h1>It has opacity 100%</h1></div>
</body>
</html>

Implementing RGBA to apply CSS Opacity

In the above example, using RGBA solves the issue we were facing while using the opacity property. The children element, that is the h1 element, does not get the opacity of its parent div element. 

Browser Compatibility Issues with CSS Opacity and RGBA

Browser Compatibility Issues with CSS Opacity 

The opacity feature in CSS is very handy and straightforward, getting our work done with just one line of code, however, is not supported in earlier browsers, and thus requires browsers specific rules to work.

Browser Compatibility of CSS Filter Effects

Let’s see how CSS renders on older browsers’ versions with the help of BrowserStack Live for cross browser testing. This is one of the most effective way check and improve CSS browser compatibility issues.

Read More: How to test on older browser versions easily

Here’s an example of how CSS Opacity looks on an older IE browser v8 using BrowserStack Live.

Testing CSS Opacity with old browser versions

Browser Compatibility Issues with RGBA

When using the RGBA approach in setting the opacity of the HTML elements, it solves an issue of applying the opacity only to the parent elements. While all major browsers support RGBA, it is not supported in Internet explorer’s 6-8 versions.

Browser Compatibility with CSS Colors like RGBA

Source

It is because Microsoft uses ARGBA values. ARGBA values are 8 characters hex format values, where the first two characters define its opacity and the other characters state the intensities of red, green, and blue color respectively. For example, if you want to have this color of hex code #11FF00 to 85% transparent, its ARGB value will correspond to #D911FF00.

Testing CSS Opacity and RGBA compatibility on IE

Solutions for Fixing Browser Compatibility Issues with CSS Opacity and RGBA

How to fix Browser Compatibility Issues in CSS using opacity property

To solve, the above compatibility issue while using the opacity property in CSS, add the following script in your CSS. Adding the following code will resolve all the issues while rendering on any browser. 

div { 
opacity: 0.6; 
filter: alpha(opacity=60); 
zoom: 1;
}

How to solve Browser Compatibility Issues in CSS using RGBA 

To solve compatibility issues using RGBA, first convert your RGB value to hex code and then add opacity by adding the two digits in front of the hex code. To add those first two digits, use the following data. 

100%

FF 

95%

F2

90%

E6

85%

D9

80%

CC

75%

BF

70%

B3

65%

A6

60%

99

55%

8C

50%

80

45%

73

40%

66

35%

59
30%

4D

25%

40
20%

33

15%

26
10%

1A

5%

0D

0%

00

Add the following script inside the HTML tag, for which you want to apply opacity.

div{
background: transparent; // fallback to this state if RGBA doesn’t render

background: rgba(17, 255, 1,0.25); //for modern browsers

filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr='#9911F00', EndColorStr='#9911F00'); // for IE 6-7

ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=1, StartColorStr='#9911F00', EndColorStr='#9911F00')"; // for IE 8

Zoom:1; // for IE
}

Summing it up

It is common to use CSS’s Opacity feature for web designing, as it increases the quality of your website manifold times, therefore, it is necessary to understand all compatibility issues you’re going to deal with while using it. Although both offer excellent support for several browsers, we face a few exceptions on Internet Explorer 8 and below. 

Moreover, with BrowserStack Live, you can check if your code works on multiple browsers and operating systems simultaneously. This allows you to test your web application in real user condiitons so it offers a suitable user experience irrespective of the browser used. Nevertheless, the solutions mentioned above create a clear path for your designs to work across all browsers. 

Try BrowserStack Live for Free

Tags
Cross browser testing Website Testing

Featured Articles

Browser compatibility with CSS Gradients

How to Create Browser Specific CSS Code

App & Browser Testing Made Easy

Seamlessly test across 20,000+ real devices with BrowserStack