firefox seems to work with the svg version of it but the -moz nop, which is werid what else uses the mozilla prefix that isn't gecko engine. I just did a lil codepen to test it out and im having no trouble getting it working in firefox. (thought transitions don't appear to have an affect on it, probably not a transitionable property)
http://caniuse.com/#search=filter <--- says it all really
focus on the svg filters version, thats whats going to give you the most cross browser comptability.
Also check your filters.svg if its loading blank images i suspect it may be borked.
So, here is what i figured out that works best for me.
I fixed the SVG filter for firefox.
to resolve the issues i was having in safari [far too much contrast] and the image flickering in chrome i did this:
.item-image img {
/-webkit-filter: grayscale(100%);/ Chrome 19+ & Safari 6+ /
/-webkit-transition: all .5s ease; /* Fade to color for Chrome and Safari /
/-webkit-backface-visibility: hidden; /* Fix for transition flickering /
/-moz-filter: grayscale(100%);/
/-moz-transition: all .5s ease;
-moz-backface-visibility:hidden; ------ ABOVE IS NOt TO BE USED - CAUSES FLICKERING IN CHROME AND EXCESS CONTRAST IN SAFARI*/
-webkit-filter: grayscale(1);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: gray;
filter: url(filters.svg#grayscale);
display:block;
opacity:0;
}
I have a 3 column fluid site [wordpress template]
and I have added a grayscale filter to all my images. simple and effecting.
there are a couple of issues that I am having and can't figure out. so here goes.
i had to disable the filter in firefox as is was loading blank images that only showed upon rollover
loads fine in chrome, but when the user begins to scroll, random images flicker blank.
the contrast in safari is outta control. is there any way to bring this in line with how it looks in chrome?
www.roberterdmann.com
i used a simple comment marker to disable the firefox filter.
I have no idea but your filter properties are in the wrong order.
The un-prefixed version should ALWAYS be last.
highly experimental no standardisation infact doesn't even work on mozilla's engine when im using their own examples. https://developer.mozilla.org/en-US/docs/CSS/filter
Yeah...I had a feeling it was only Chrome (beta) that was using it at the moment.
firefox seems to work with the svg version of it but the -moz nop, which is werid what else uses the mozilla prefix that isn't gecko engine. I just did a lil codepen to test it out and im having no trouble getting it working in firefox. (thought transitions don't appear to have an affect on it, probably not a transitionable property) http://caniuse.com/#search=filter <--- says it all really
focus on the svg filters version, thats whats going to give you the most cross browser comptability. Also check your filters.svg if its loading blank images i suspect it may be borked.
Hey thanks for all your feedback. it's truly appreciated.
This is one area that is still a little new to me, so i am learning as i go.
i'll post if i have success.
thanks guys!
So, here is what i figured out that works best for me.
I fixed the SVG filter for firefox.
to resolve the issues i was having in safari [far too much contrast] and the image flickering in chrome i did this:
.item-image img { /-webkit-filter: grayscale(100%);/ Chrome 19+ & Safari 6+ / /-webkit-transition: all .5s ease; /* Fade to color for Chrome and Safari / /-webkit-backface-visibility: hidden; /* Fix for transition flickering / /-moz-filter: grayscale(100%);/ /-moz-transition: all .5s ease; -moz-backface-visibility:hidden; ------ ABOVE IS NOt TO BE USED - CAUSES FLICKERING IN CHROME AND EXCESS CONTRAST IN SAFARI*/ -webkit-filter: grayscale(1); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: gray; filter: url(filters.svg#grayscale); display:block; opacity:0; }
.item-image img:hover { -webkit-filter: grayscale(0); -ms-filter: grayscale(0%); -o-filter: grayscale(0%); filter: none; }
it seems that i needed to use the older webkit filter instead of the newer - strange because all my browsers are the latest. but it's working.