title: CSS filter grayscale not working in Firefox
body: <p>I'm having troubles doing a transition from grayscale to colored, it works in chrome, but that is it.</p>
  
  <p>Here is the HTML:</p>
  
  <pre><code>&lt;div id="post" style="background-image:url('bg.png');background-repeat:no-repeat;"&gt;
      &lt;p&gt;&lt;a href="/post.php?id=1"&gt;Title - Date&lt;/a&gt;&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here is the CSS:</p>
  
  <pre><code>#post{
      padding:0;
      margin:0 auto;
      margin-bottom:25px;
      border:solid 1px #000;
      height:150px;
      width:750px;
      display:block;
      filter: url("data:image/svg+xml;utf8,&lt;svg xmlns=\'http://www.w3.org/2000/svg\'&gt;&lt;filter id=\'grayscale\'&gt;&lt;feColorMatrix type=\'saturate\' values=\'0.5\'/&gt;&lt;/filter&gt;&lt;/svg&gt;#grayscale");
      filter: gray alpha(opacity=50);
      -webkit-filter: grayscale(50%);
      -webkit-transition: 0.3s all ease;
      -o-transition: 0.3s all ease;
      -moz-transition: 0.3s all ease;
      transition: 0.3s all ease;
      -webkit-backface-visibility: hidden;
  }
  
  #post:hover{
      filter: none;
      -webkit-filter: grayscale(0%);
  }
  </code></pre>
  
  <p>Thanks for any help, it's appreciated.</p>