8

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 this one, I've gotten to this point (simplified to demonstrate the issue):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
    <head>
        <title></title>
        <style type="text/css">
            .grayscale {
                filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><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\'/></filter></svg>#grayscale"); /* Firefox 10+ */
                filter: gray; /* IE6-9 */
                -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */
                filter: grayscale(100%);
            }
            img {
                width:100px;
            }
        </style>
    </head>
    <body>
        <img class="grayscale" src="http://alltheragefaces.com/img/faces/png/rage-nuclear.png" />
        <img src="http://alltheragefaces.com/img/faces/png/rage-nuclear.png" />
    </body>
</html>

And here's the fiddle

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.

Note: Using Firefox v20.0.1

Community
  • 1
  • 1
dasch88
  • 999
  • 10
  • 13
  • 2
    +1 for knowing how to ask a complicated question properly. – Steve Wellens May 06 '13 at 16:39
  • So just to clarify, when you view on screen the image is greyscaled but when you print out the contents of the screen the greyscale is not applied to the printed image (on paper?). – jezzipin May 08 '13 at 15:19
  • Close, rather the image that is grayscaled is not visible at all. For instance, even printing the fiddle page itself will cause only the color image to show, while the grayscaled image is not visible (although the layout space is still preserved). – dasch88 May 08 '13 at 15:47

1 Answers1

0

It turns out this almost appears to be a browser bug in FireFox. I noticed that anytime (on screen) when an svg is referenced that the browser can't find, the I would get the exact same issue as I did when printing: the image layout would be reserved, but it would be blank space. This prompted me to wonder if there was a difference in what could be loaded/found when rendering for a printer rather than the screen, so I started trying different ways of loading/referencing the svg. I tried loading the svg from a separate file, from an id in the html, and inline, all in combination with defining the filter in a separate css file, in-page classes, and inline styles. Of all the combinations, this is what worked:

Define the svg in html, and reference it using inline styles or in-page css classes.

I know it sounds weird, but literally everything else I tried breaks, including doing everything the same but setting the filter css property in an external css file. Going the in-page class approach, here's what the fixed html would look like:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
    <head>
        <title></title>
        <style type="text/css">
            .grayscale {
                filter: url(#grayscale); /* Firefox 10+ */
                filter: gray; /* IE6-9 */
                -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */
            }
            img {
                width:100px;
            }
        </style>
    </head>
    <body>
        <img class="grayscale" src="http://alltheragefaces.com/img/faces/png/rage-nuclear.png" />
        <img src="http://alltheragefaces.com/img/faces/png/rage-nuclear.png" />
        <svg xmlns='http://www.w3.org/2000/svg' height="0px">
            <filter id='grayscale'>
                <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'/>
            </filter>
        </svg>
    </body>
</html>

And again, the modified fiddle from which you can print and now see the image just fine in Firefox.

Siiigh, this is the kind of thing I'd expect from IE...hopefully helps save somebody some time/grief/murderous thoughts

dasch88
  • 999
  • 10
  • 13