title: Filter Grayscale not working with Chrome
body: <p>I have a link in my HTML page which is an image, and is transitionning from fully grayscale to partially grayscale on hover.</p>
  
  <p>Here is the HTML a bit simplified: </p>
  
  <pre><code>&lt;div id="myid"&gt;
      &lt;a href="targetlinkhere"&gt;&lt;img alt="" class="rounded" src="imglinkhere" /&gt;&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and my CSS :</p>
  
  <pre><code>#myid a:link,#myid a:active,#myid a:visited{
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    -webkit-transition: -webkit-filter ease 1s;
    -moz-transition: -moz-filter ease 1s;
    -o-transition: -o-filter ease 1s;
    -ms-transition: -ms-filter ease 1s;
    transition: filter ease 1s;
  }
  
  #myid a:hover {
    filter: grayscale(20%);
    -webkit-filter: grayscale(20%);
    -moz-filter: grayscale(20%);
    -ms-filter: grayscale(20%);
    -o-filter: grayscale(20%);
  }
  </code></pre>
  
  <p>Everything works fine with Firefox but Chrome doesnt apply any filter at all. And doesn't transition either. 
  Though when I apply the above code to <code>#myid img</code> then the filter is applyed to the image. </p>
  
  <p>Is it not right to apply a filter to an <code>a</code> tag ?</p>