10

I am trying to show some images on a page where they should be shown in grayscale, except on mouse hover when they smoothly transition into color. I've made it work nicely on IE, Chrome and Firefox, but it doesn't work on Safari 5.x. The problem is on Safari for Mac and Safari for Windows. Here is the code I have so far:

filter: url('desaturate.svg#greyscale'); 
filter: gray;
-webkit-filter: grayscale(1);

The first line loads an external .svg filter (I don't inline it with a url("data:... rule because I want to avoid a bug in old versions of Firefox).

The second line is for IE and seems to work just as well as filter:progid:DXImageTransform.Microsoft.BasicImage(grayScale=1);.

The last line about webkit is supposed to work on Safari 6 and above, as well as Chrome.

Is there any CSS rule to show the images with grayscale on Safari 5.x? Or, if that is not possible, can someone recommend a javascript solution, preferably one that will handle the animation to and from grayscale? I would like to avoid a server-side hack with grayscale images because that will mess up my HTML and then I'll have to do some nasty browser detection to serve HTML conditionally.

thanks

Edit:

As this has turned out to be a "notable question", please don't keep posting here more answers that only work on Safari 6 and above, or answers that include an .svg file in a data url. At the time when I wrote the OP, it was important for me to support some versions of Safari and Firefox that are today considered very dated, but nevertheless that was my original question.

I am well aware that for modern browsers grayscale filtering is easily accomplished with a few lines of CSS code, but the graphics designer was using Safari 5.x and the client was using Firefox 3.x at the time I did this project. The solution that worked for me was what Giona suggested, i.e. to use Modernizr to test for css-filtering, and if it's not supported to fall back to javascript.

If I was doing the same thing today, I'd be telling both to go update their browsers!

0

4 Answers 4

9

As you can see on caniuse.com , CSS3 filters are supported by very few browsers at the moment.

There are many JavaScript/jQuery fallback if you Google "javascript grayscale plugin". Here are some:

But i've no experience with them, so i can't suggest you which one is the best.

I tried jQuery Black And White long time ago, and it gave me a lot of issues with relative/absolute positioned images, so maybe avoid it.


Including this Modernizr build into your pages, you can target browser not supporting filters via Javascript:

if(!Modernizr.css_filters){
    /* javascript fallback here */
}

or CSS:

.no-css_filters .element {
    /* css fallback here */
}

Oh, and don't forget dowebsitesneedtolookexactlythesameineverybrowser?

7
  • Hey man thanks for the links. Later I'll look at them and see which one does the trick for me, and I'll report back here. Hoverizr looks promising. Also, I like the idea of using Modernizr for this, so thanks for that too. As for your last point, I agree, but try telling that to my client and graphics designer. sigh
    – alexg
    Oct 2, 2012 at 7:28
  • Eheheh i know, clients and photoshop maniacs can't understand. Modernizr is one of the most useful tool for web designers, you can also easily add custom tests! Good coding @alexg
    – Giona
    Oct 2, 2012 at 7:32
  • 1
    I finally got around to do this. Turns out I used Grayscale.js. Your second and third links are the same project, and it had some bug where it assumes (line 82 in the source code) that images are <img src=""> while mine were background-images. Also, the correct link for the modernizr build is modernizr.com/download/… because you also need the _prefixes to test for css filters. Now it should work on Safari 3.1 and above, according to caniuse.com/canvas. I didn't get the animation working but I think it's fine the way it is.
    – alexg
    Oct 5, 2012 at 10:11
  • If anyone's interested, I used Safari 5.0.3 for windows to test it.
    – alexg
    Oct 5, 2012 at 10:15
  • 1
    sidenote: jQuery GreyScale plugin does not work in Chrome 24 due to cross-domain security issues.
    – Raptor
    Feb 5, 2013 at 3:29
1

It's really simple, actually:

I tried using the javascript fallback, but it really made no sense, and it was really slow on large images. This made a lot more sense. Note that there is a new syntax for grayscale, and I had to manually edit the resulting minified CSS from LESS.

Here's my mixin:

.filter (...) {
    -webkit-filter: @arguments;
    -moz-filter: @arguments;
    -ms-filter: @arguments;
    -o-filter: @arguments;
    filter: @arguments;
}

And my class:

.grayscale-hover, .home-image {
    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 see http://jsfiddle.net/KDtAX/487/*/
    .filter(grayscale(1) blur(1px));
    filter: gray; /* IE6-9 */
    -webkit-backface-visibility: hidden; /* Fix for transition flickering */
    &:hover {
        .filter(none);
        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");
    }
}

Works and tested in IE 6+, Firefox, Chrome.

1
  • Hey, thanks. +1 for the thorough work, but does it work in Safari 5.1 as I asked in my OP? I don't have access to that browser right now. And as I also mentioned in the OP, inlining an svg filter using a data: url doesn't work in some old versions of FF (e.g. 4.0.1).
    – alexg
    Apr 26, 2013 at 9:55
0

This is something like that:

.grayscale {    
   filter: url(css/grayscale.svg#greyscale);    
   -webkit-filter: grayscale(1);    
   -moz-filter: grayscale(100%);    
   -ms-filter: grayscale(100%);    
   -o-filter: grayscale(100%);    
} 

You need to download the svg file either.

1
  • Welcome to Stack Overflow! Thanks for posting your answer! Please be sure to read the FAQ on Self-Promotion carefully. Also note that it is required that you post a disclaimer every time you link to your own site/product. I am removing your link so that no one flags this as spam. Mar 11, 2013 at 16:35
0

This one worked great for me:


img { float:left;
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\' filterRes=\'800\'><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+ */
    -webkit-backface-visibility: hidden; /* Fix for transition flickering */
    -webkit-transition: all 1.5s ease;
       -moz-transition: all 1.5s ease;
        -ms-transition: all 1.5s ease;
         -o-transition: all 1.5s ease;
            transition: all 1.5s ease;
            z-index: 40 !important;
             display:block;

 }

img:hover { 
  filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\' filterRes=\'800\'><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");
    -webkit-filter: grayscale(0%);}

The images looks really overexposed in Safari however (But they are in greyscale). And the transition isn't supported by Firefox.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.