CSS Filter not working in Firefox
GrayScale has limitations to work in firefox using a -moz-filter.
To get it working use the below snippet:
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 3.5+ */
DEMO
Why backdrop filter in Firefox don't work?
Its not supported by default https://caniuse.com/css-backdrop-filter
However you can activate it manually.
Navigate to about:config
and set it to true
SVG filter not showing up in Firefox, working fine in Chrome
There's an input called coloredOut but no output called coloredOut so the filter chain fails. Removing the in="coloredOut" attribute seems to fix that. You might want to raise a Chrome bug that it's not enforcing valid filter chains.
In addition the SVG pushes the text down so you can't see it in the codepen. Adding width="0" height="0" to the <svg>
element fixes that issue.
CSS blur filter not working in Firefox and IE 10, any alternatives?
CSS3 filters are not supported in IE10 or Firefox (v.23), and support is unknown for those browsers in the near future.
Have a look: http://caniuse.com/#feat=css-filters
You could use Modernizr to check for CSS filter support and fallback to a background image if not supported.
CSS filter grayscale not working in Firefox
Try setting #post:hover to this:
filter:grayscale(0%);
-webkit-filter: grayscale(0%);
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");
You can look it up here. http://www.cheesetoast.co.uk/add-grayscale-images-hover-css-black-white/
in case tutorial link will be dead
works in: Safari 6.1.1, Firefox 26.0, Chrome 32.0.1700.77
.slides li img{
filter: grayscale(100%);
-webkit-filter: grayscale(100%); /* For Webkit browsers */
filter: gray; /* For IE 6 - 9 */
-webkit-transition: all .6s ease; /* Fade to color for Chrome and Safari */
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 */
}
.slides li img:hover{
filter: grayscale(0%);
-webkit-filter: grayscale(0%);
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");
}
As noted by Adam below:
From Firefox 35 filter: grayscale(100%); should work.
Related Topics
Is Form Enctype "Application/JSON" Available
Why Isn't My Margin Working with Position: Fixed
Mobile Website "Whatsapp" Button to Send Message to a Specific Number
Getting Youtube.Com to Load in Iframe
Django: How to Send HTML Emails with Embedded Images
Ckeditor Strips Inline Attributes
Bootstrap 3 - How to Maximize Input Width Inside Navbar
Display Adobe PDF Inside a Div
Why Is "&Reg" Being Rendered as "®" Without The Bounding Semicolon
How to Set The <Img> Tag with Basic Authentication
Center a Div Horizontally and Vertically and Keep Centered When Resizing The Parent
Remove .HTML and .PHP Extensions with .Htaccess
Best Way to Implement Background Image on HTML or Body
Insert HTML Code Inside Svg Text Element