Transparent text with text-shadow in IE

user_1106416 0
Viewed 2911

When using color: rgba(255,255,255,0.0); in conjunction with text-shadow: 0px 0px 2px rgba(255,255,255,1);, Internet Explorer seems to inherit the transparency of the text-shadow from the text itself, causing the shadow not to appear at all.

JSFiddle example (view in IE): http://jsfiddle.net/495dZ/1/

Is there a clever pseudo-class technique to work around this? Or maybe something using jQuery to achieve a similar effect?

transparent internet-explorer css
4 Answers

A extra text-shadow definition for IE 10+ do the trick: 

.transparent-text-with-shadow {

    color:         transparent;                            // or rgba(0,0,0,0);
    text-shadow:   rgba(0,0,0,1) 0px 0px 10px;             // for Chrome etc.
    text-shadow:   rgba(0,0,0,1) 0px 0px 10px 0.01em;      // for IE 10+
}

The second text-shadow definition overwrites the first in IE 10+ only, because IE 10+ supports a fourth length value for the shadow's "spread" - see http://caniuse.com/#search=text-shadow

In other browsers, like Chrome, the second text-shadow definition overwrite fails, because they do not support a fourth length value for the shadow, and so they will use the first text-shadow definition.

(Make sure the fourth "spread" value is very small - so you can't see any rendering differences.)

user_20234120
Related