tpmsta
Last Updated: August 22, 2016
·
27.69K
· chris morgan
16a138ff3b9c8f1663f8a0613c47b60a

CSS's "transparent" may not be transparent, especially on diagonal borders

css

You might not realise it, but transparent is defined as rgba(0, 0, 0, 0)—transparent black. In WebKit browsers with no anti-aliasing (I believe they're finally in the process of rectifying this omission), this doesn't matter. However, in browsers with anti-aliasing of diagonal borders (IE9+ and Firefox), this can have serious implications.

IE9 does tricky stuff so that (unfortunately for the Mozilla-lover in me) it doesn't have a problem, but Firefox handles it the naive way, drawing what is effectively a gradient between the two border colours.

Take a look at what something like this does:

border-top: 100px solid transparent;
border-left: 100px solid #eee;

<div style="border-left:100px solid #eee; border-top:100px solid transparent"></div>

Yep, if you're using Firefox, you'll see there a dark grey line between the light grey and the white, because it's rendering a gradient from #eee to transparent black (and so it hits semi-transparent darker grey in the middle of the gradient).

To get it working properly in Firefox, you would need transparent #eee rather than transparent #000. (Sorry, convert your hex to decimal, #rgba didn't make it into the CSS3 Colors module.)

border-top: 100px solid rgba(238, 238, 238, 0);
border-left: 100px solid #eee;

<div style="border-left:100px solid #eee;border-top:100px solid rgba(238,238,238,0)"></div>

As it stands, many, many things use transparent black when they shouldn't. And very few people understand why.

2 Responses
Add your response

1294
8931e023c82f232d4d02a115710fb8fc

Looking at the CSS3 Color module, I see this: http://www.w3.org/TR/css3-color/#rgba-color - why do you say that RGBA didn't make it into the module?

over 1 year ago ·
1692
4ff020826d61a6cfd875cb5cc29e5ce6

I believe he was referring to this:

// The extra two characters are the alpha channel:
background-color: #EEEEEE00;
// Or...
background-color: #eee0;
over 1 year ago ·