Grayscale Image with CSS on Safari 5.X

Grayscale image with CSS on Safari 5.x

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:

• Grayscale.js
• jQuery GreyScale plugin
• Hoverizr
• Do it with canvas (tutorial)

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?

Weird filter:grayscale bug in Safari iOS?

Reading this thread, I found that applying the following properties to the element with the filter makes the glitch go away:

-webkit-transform: translateZ(0);
-webkit-perspective: 1000;
-webkit-backface-visibility: hidden;

CSS -webkit-filter: grayscale(0%) don't work in IE 10 and Safari

use this for all browsers

-webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
  filter: url(grayscale.svg); /* Firefox 4+ */
  filter: gray; /* IE 6-9 */

refer http://labs.voronianski.com/css3-grayscale/

Mobile Safari grayscale filter adds blur

A little bit too late but this should do the trick:

-webkit-transform: translateZ(0);

source: http://matthewhappen.com/fixing-css3-filter-blur-on-retina-displays/

Gray out image with CSS?

Does it have to be gray? You could just set the opacity of the image lower (to dull it). Alternatively, you could create a <div> overlay and set that to be gray (change the alpha to get the effect).

• html:

  <div id="wrapper">
      <img id="myImage" src="something.jpg" />
  </div>
  

• css:

  #myImage {
      opacity: 0.4;
      filter: alpha(opacity=40); /* msie */
  }
  
  /* or */
  
  #wrapper {
      opacity: 0.4;
      filter: alpha(opacity=40); /* msie */
      background-color: #000;
  }
  

---

Related Topics