Geek Answers Handbook

Grayscale Filter and Print in Firefox

I am having a problem so that the CSS property of the Firefox filter appears correctly on the print page. For some reason, the grayscale image does not appear on the printout, although it appears as expected on the screen. After addressing issues like this , I got to this (simplified to demonstrate the problem):

<!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 is fiddle

Is there a viable workaround for this, or am I doing something wrong? Applying filters to other elements seems to cause the same problem. I would appreciate a constructive contribution.

Note. Using Firefox v20.0.1

+8
css firefox filter grayscale
source share
1 answer

Turns out this is almost like a browser bug in FireFox. I noticed that at any time (on the screen), when svg refers to what the browser cannot find, I get the same problem as when printing: the layout of the image will be reserved, but it will be empty space. This prompted me to wonder if there is a difference in what can be loaded / detected when rendering for the printer, and not on the screen, so I started trying different ways to download / link to svg. I tried loading svg from a separate file, from id to html and inline, all in combination with a filter definition in a separate css file, in-page classes and inline styles. Of all the combinations, this is what worked:

Define svg in html and link to it using inline styles or css classes on the page.

I know this sounds strange, but literally everything else I tried breaks, including the same thing, but setting the css filter property in an external css file. Turning to the class approach on the page, here is what the fixed html looks 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 you see the image is just fine in Firefox.

Siiigh, this is what I expect from IE ... hope helps someone save time / sadness / suicidal thoughts

0
source share

More articles:


All Articles