title: -webkit-text-fill-color not applying
body: <p>I have styled a typographic dropcap element with the dropcap clipping a background image using a pseudo p:first-of-type::first-letter element and some styling effects. Right now, '-webkit-text-fill-color:transparent' isn't being read for some reason (is this because it's a pseudo element?). The only way for my text-clipped background image to appear is by applying 'color:transparent'. However, this means that I can't set a 'color:' fallback for other browsers. Why isn't webkit-text-fill-color working, and is there another way to create a firefox/ie browser friendly fallback?</p>
  
  <p>Here is a jsfiddle of what I have so far: <a href="https://jsfiddle.net/v5j9mk95/" rel="nofollow">https://jsfiddle.net/v5j9mk95/</a></p>
  
  <p>The Css:</p>
  
  <pre><code>    .nc-exp-article:not(.nc-exp-article-internal) &gt; p:first-of-type::first-letter,
  .nc-exp-divider + p::first-letter {
    font-style: italic;
    font-weight:500;
    font-size:92px;
    line-height:84px;
    float:left;
    padding-right:5px;
    margin-left:5px;
    margin-right:5px;
  
    color: white;
  -webkit-text-fill-color: transparent;
  background: -webkit-linear-gradient(transparent, transparent),
  url('https://s-media-cache-ak0.pinimg.com/236x/2f/13/08/2f13084ef9fb63af92e951ae50e80bc4.jpg');
  background: -o-linear-gradient(transparent, transparent);
  -webkit-background-clip: text;
  }
  }
  </code></pre>