CODEWITHSUNDEEP
css
Raptor
Raptor

Reputation: 54212

CSS3 Filter Difference between Firefox and Chrome

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

Upvotes: 3

Views: 730

Answers (3)

vals
vals

Reputation: 64164

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.

Upvotes: 3

Nishant
Nishant

Reputation: 916

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 :)

Upvotes: 0

kmoe
kmoe

Reputation: 2083

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

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

Upvotes: 4

Related Questions