title: Firefox filter grayscale and printing
body: <p>I've run into a problem getting Firefox's filter css property to grayscale properly on the printed page. For some reason, the grayscaled image is not visible on the printout, though it displays as expected onscreen. After referring to questions like <a href="https://stackoverflow.com/questions/12173130/css-filter-not-working-in-firefox">this one</a>, I've gotten to this point (simplified to demonstrate the issue):</p>
  
  <pre><code>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;&lt;/title&gt;
          &lt;style type="text/css"&gt;
              .grayscale {
                  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=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/&gt;&lt;/filter&gt;&lt;/svg&gt;#grayscale"); /* Firefox 10+ */
                  filter: gray; /* IE6-9 */
                  -webkit-filter: grayscale(100%); /* Chrome 19+ &amp; Safari 6+ */
                  filter: grayscale(100%);
              }
              img {
                  width:100px;
              }
          &lt;/style&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;img class="grayscale" src="http://alltheragefaces.com/img/faces/png/rage-nuclear.png" /&gt;
          &lt;img src="http://alltheragefaces.com/img/faces/png/rage-nuclear.png" /&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>And here's the <a href="http://jsfiddle.net/XeutA/" rel="nofollow noreferrer">fiddle</a></p>
  
  <p>Is there a viable workaround for this, or am I doing something wrong? Applying the filters to other elements seems to cause the same problem. I would greatly appreciate any constructive input.</p>
  
  <p>Note: Using Firefox v20.0.1 </p>