Firefox does not pick up an SVG filter to desaturate images.
I used the following SO answer ...
.. to implement unsaturated thumbs, where when they hover the filter is removed and the thumb shows the color. I got this to work fine in my development environment. Now that I have a function in production, it doesn't work in Firefox (10):
http://www.jungledragon.com/video/2
Please note that besides the video, there are several thumbs, but only one view, the other is displayed only after it freezes. It must, of course, be always visible, but unsaturated when it is not active.
In my search for a definition of the difference between my dev and production setup, I read that the SVG file request (for the filter) must come from the same domain as the page requesting it.
In production my shared domain is www.jungledragon.com
The CSS file containing the link to the filter is hosted on a separate subdomain: static.jungledragon.com. This CSS file links to filters.svg, which is located in the same directory at static.jungledragon.com.
I would have thought that since the CSS and SVG file are in the same domain and directory, there should be no problem. Then I thought that maybe the requesting page (not the CSS, but the HTML file) should be on the same domain as the SVG file. So I adjusted the link inside the CSS file at hardcoded www.jungledragon.com. It doesn't help either.
Any ideas why Firefox isn't picking up the SVG link correctly?
source to share
As per this answer, svg filters only work on xhtml documents, so I assume your local webserver does this, but your public one is not.
Add a .htaccess file with the following content:
RewriteEngine on
RewriteBase /
RewriteCond %{HTTP_ACCEPT} application/xhtml\+xml
RewriteCond %{HTTP_ACCEPT} !application/xhtml\+xml\s*;\s*q=0
RewriteCond %{REQUEST_URI} \.html$
RewriteCond %{THE_REQUEST} HTTP/1\.1
RewriteRule .* - [T=application/xhtml+xml]
Also the link to the svg file is missing http://
section.videopanel .videos li img {
-moz-transition: all 0.5s ease 0s;
filter: url("http://www.jungledragon.com/css/filters.svg#grayscale");
}
source to share