CSS Filter Grayscale Not Working in Firefox

CSS filter grayscale not working in Firefox

Try setting #post:hover to this:

  filter:grayscale(0%); 
  -webkit-filter: grayscale(0%);
  filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");

You can look it up here. http://www.cheesetoast.co.uk/add-grayscale-images-hover-css-black-white/

in case tutorial link will be dead
works in: Safari 6.1.1, Firefox 26.0, Chrome 32.0.1700.77

.slides li img{
  filter: grayscale(100%);
  -webkit-filter: grayscale(100%); /* For Webkit browsers */
  filter: gray; /* For IE 6 - 9 */
  -webkit-transition: all .6s ease; /* Fade to color for Chrome and Safari */
  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+, Firefox on Android */
}
.slides li img:hover{
  filter: grayscale(0%);
  -webkit-filter: grayscale(0%);
  filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
}

As noted by Adam below:
From Firefox 35 filter: grayscale(100%); should work.

CSS Filter not working in Firefox

GrayScale has limitations to work in firefox using a -moz-filter.

To get it working use the below snippet:

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 3.5+ */

DEMO

grayscale css not working in chrome or firefox or fiddle

you are trying to gray-scale an image which is already Black and White, so try to gray-scale a colored image, hover it see the image back to colored

/* Latest compiled and minified CSS included as External Resource*/
/* Optional theme */
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css'); body {  margin: 10px;}.comment {  margin-left: 50px;}img.resize {  width: 40px;  height: auto;}img {  filter: gray;  /* IE6-9 */  filter: grayscale(100%);  /* Microsoft Edge and Firefox 35+ */  -webkit-filter: grayscale(1);}
img:hover {  filter:0;  /* IE6-9 */  filter: grayscale(0%);  /* Microsoft Edge and Firefox 35+ */  -webkit-filter: grayscale(0);}

<img src="http://lorempixel.com/50/50" class="img-responsive resize">

Firefox: How to Grayscale an Entire Page without breaking fixed-positioned elements?

What if you apply the filter to body > *? Less performant, but may solve this issue. I admit to not fully considering new issues it may raise, but I can't think of a scenario in which it would alter the containing block of second depth elements.

Grayscale SVG not working on firefox

It's because you're using the new shorthand notation for filter effects on html elements (as defined here), in Firefox you'll have to use the url(#...) notation for filters (also part of the same spec, and of SVG 1.1 where it's been working for a long time).

If you want to see how to do a grayscale filter that works in most browsers see here, and if you want to read about how you make it apply to some html see e.g here.

Firefox filter grayscale and printing

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

---

Related Topics