CSS3 Filter Difference between Firefox and Chrome

Question

I am making cross-browser image effect, but the effects in different browsers are quite different. I think the filter values are the problem. Here are the codes.

CSS

img {
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.85 0.85 0.85 0 0 0.85 0.85 0.85 0 0 0.85 0.85 0.85 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
    filter: grayscale(85%);
    -webkit-filter: grayscale(85%);
}
div {
    filter: blur(2px);
    -webkit-filter: blur(2px);
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\"><filter id=\"svgBlur\" x=\"-2%\" y=\"-2%\" width=\"104%\" height=\"104%\"><feGaussianBlur in=\"SourceGraphic\" stdDeviation=\"5\"/></filter></svg>#svgBlur");
}

HTML

<div><img src="http://www.presidiacreative.com/wp-content/uploads/2012/04/interior-design-22.jpg" /></div>

Here is the jsFiddle

Last, here is the screenshot ( Left: Firefox 25, Right: Chrome 31 ).

Note: Target Browser support: Chrome 30+, Firefox 20+, Safari 6+, IE7+

Screenshot

score 4 · Answer 1 · answered Dec 17 '13 at 15:26

4

Unfortunately Firefox 25 doesn't currently support most of the CSS3 filters.

This link shows that most of your target browsers don't either!

answered Dec 17 '13 at 15:26

kmoe

1,617
2
13
27

vals · Accepted Answer · 2013-12-21T11:32:37.217

I am not really sure that I got really the same results in FF than in Chrome, but I show the way, and you can finally set the fine adjusts.

The grayscale filter works by taken colors from their original color and putting them in the other colors, averaging the color distribution.

To set it at less than 100%, you need to keep a greater proportion of color in the original one.

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

In this matrix, I have increased the diagonal values to 1, and lowered the others to 0.6. If you want to keep more color from the original, lower the 0.6 values, but keep the 1 in the diagonal as they are

on the other side, I have lowered the blur amount. PLay with the stdDeviation value

div {
    filter: blur(2px);
    -webkit-filter: blur(2px);
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\"><filter id=\"svgBlur\" x=\"-2%\" y=\"-2%\" width=\"104%\" height=\"104%\"><feGaussianBlur in=\"SourceGraphic\" stdDeviation=\"4\"/></filter></svg>#svgBlur");

}

demo

A much better solution

img {
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.5 0.3 0.3 0 0 0.3 0.5 0.3 0 0 0.3 0.3 0.5 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
    filter: grayscale(85%);
    -webkit-filter: grayscale(85%);
}
div {
    filter: blur(2px);
    -webkit-filter: blur(2px);
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\"><filter id=\"svgBlur\" x=\"-2%\" y=\"-2%\" width=\"104%\" height=\"104%\"><feGaussianBlur in=\"SourceGraphic\" stdDeviation=\"2\"/></filter></svg>#svgBlur");
}

demo 2

A formula to calculate the matrix would be. non diagonal values grayscale percentage / 3. in your case, 0.85 / 3 = 0.28. Diagonal values, the previous + (1 - percentage). In your case 0.28 + (1 - 0.85) = 0.43.

score 0 · Answer 3 · answered Dec 20 '13 at 07:58

0

As @kmoe said your target browsers don't support this and even the ones that does the results may vary so your best solution would be to use a transparent blurred image as a mask over your original images. See if that helps :)

answered Dec 20 '13 at 07:58

Nishant

773
6
16

thanks for the reply, but how to make the image to have 85% grayscale if I overlay an image on it ? – Raptor Dec 20 '13 at 08:05
first of all sorry i missed the grayscale part earlier check this ... this might be helpful :) http://stackoverflow.com/a/8612047/3118292 It is supported by firefox 3.5+ & also IE 6-9 – Nishant Dec 20 '13 at 08:24
no. this is 100% grayscale. 100% grayscale is OK in Firefox, but not 85%. – Raptor Dec 20 '13 at 08:25

CSS3 Filter Difference between Firefox and Chrome

3 Answers3