RGBa, text-shadow in Safari, Firefox

While crafting my likes Museo and Sans spec last week, I found that Safari 4 and Firefox 3.5 handle RGBa alpha channel inheritance differently. I’m not sure which way is the right way (or whether, as a matter of W3C spec interpretation, there is a single right way), but both approaches seem logical. Here’s what I learned.

If an element (in our case an H2) uses color:rgba(#,#,#,0.5); and has a text-shadow, the alpha channel value of its color (0.5) is inherited by its text-shadow — in Safari. In Firefox this value is not inherited. Allow me to illustrate a few scenarios.

Hexadecimal colors

Example in Safari 4.0 (above) and Firefox 3.5 (below)

#intro h2 {
	color: #07cefa;
	text-shadow: 18px 0px 0 #ad0918;
	}

We start with regular hex colors – no alpha values, no opacity. Just color, plain and simple.

RGBa … inherited?

Example in Safari 4.0 (above) and Firefox 3.5 (below)

#intro h2 {
	color: rgba(7, 206, 250, 0.5);
	text-shadow: 18px 0px 0 #ad0918;
	}

Here we have RGBa color with an alpha value of 0.5, and our text-shadow still has a hex color. Safari applies the color property’s 0.5 alpha value to the text-shadow too; Firefox does not. Incidentally, the way Safari renders in this example is the look I was going for.

RGBa × 2

Example in Safari 4.0 (above) and Firefox 3.5 (below)

#intro h2 {
	color: rgba(7, 206, 250, 0.5);
	text-shadow: 18px 0px 0 rgba(173, 9, 24, 0.5);
	}

Now we have RGBa color with an alpha value of 0.5, and text-shadow color as RGBa with an alpha value of 0.5. Firefox renders as Safari had in the previous example, because it apparently handles the element and the element’s text-shadow independently. Safari, however, has seemingly multiplied both alpha values to produce a value of 0.25 — lighter than we intended.

Opacity

Example in Safari 4.0 (above) and Firefox 3.5 (below)

#intro h2 {
	color: #07cefa;
	text-shadow: 18px 0px 0 #ad0918;
	opacity: 0.5;
	}

Back to straight hex values this time (no alpha value), but with an opacity of 0.5 applied to the element. Colors match now, as both browsers consider opacity to be inheritable. But the effect we had been striving for is lost; both browsers seem to treat element and text-shadow as a single, flattened layer. This is a nice alternative to have in our toolboxes (imagine the nested opacity/RGBa combos!), but it doesn’t help us with my ALL ABOARD effect.

Inconclusive

As I said, both interpretations seem logical. One might expect RGBa values to be inherited by child elements … though is text-shadow really a child of the element to which it is applied? One might also expect RGBa values not to be inherited: text-shadow has its own parameters, color is one of them, and the alpha channel that’s part of RGBa is technically part of the color. After all, the R, G, and B parts of an element’s RGBa value aren’t inherited.