Why does the text-shadow property change the hsla text color?

I have a header that when hovered over, changes color to be slightly clear and to have a black outline (I make with 4 text-shadows).

This does not work when I use hsla() to define the color, though. The color is set to black with 100% opacity, and the text-shadows are off.

When I define the color with a websafe color (ie white), everything works fine.

I've posted a jsfiddle to show the problem and prove there is nothing wrong with my syntax (as far as I can tell): https://jsfiddle.net/TheInternetIO/Lxj12uje/3/ and my css (for the problem case):

h2:hover{
text-shadow:
 -1px -1px 0 #000,  
  1px -1px 0 #000,
  -1px 1px 0 #000,
   1px 1px 0 #000;
 color: hsla(0, 0%, 0%, .2);
}

Why is this happening?

Solution

So what's happening is that the text-shadow is more than just an outline, it's the characters printed over again (you can see this by giving your text-shadow crazy offsets). So though your text is semi-transparent, the text-shadows aren't, which is why it looks black. I've updated your fiddle here: https://jsfiddle.net/Lxj12uje/5/ to add transparency to the text-shadow colors and I think you'll get the effect you're looking for. For reference the change I made is here:

h2:hover{
    text-shadow:
     -1px -1px 0 hsla(0, 0%, 0%, .2),  
      1px -1px 0 hsla(0, 0%, 0%, .2),
      -1px 1px 0 hsla(0, 0%, 0%, .2),
       1px 1px 0 hsla(0, 0%, 0%, .2);
     color: hsla(0, 0%, 0%, .2);
}