Filter Grayscale not working with Chrome
<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>