CSS text background-clip very different on Firefox than on Chrome

Question

Chrome: the desired effect

Firefox: what is happening

Code:

  background-color: Red;
    -webkit-background-clip: text;
    -moz-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: rgba(255,255,255,0.5) 0px 3px 3px;

Thoughts??

Answer 1

Even though -moz-background-clip is supported in firefox. The 'text' value is not supported. You are going to have to go with another solution for non webkit browsers.

Example: http://nimbupani.com/using-background-clip-for-text-with-css-fallback.html