I have used the following SO answer...
https://stackoverflow.com/a/8612047/80969
..to implement desaturated thumbs, where upon hovering them, the filter is removed and the thumb shows in color. I have gotten this to work on my development environment just fine. Now that I have the feature in production, it doesn't work in Firefox (10):
http://www.jungledragon.com/video/2
Notice that there are multiple thumbs besides the video, but only one is visible, the other only appears after hovering it. It should of course be visible at all times, yet desaturated when not active.
In my search of finding the difference between my dev and production setup, I've read that requesting an SVG file (for the filter) has to happen from the same domain as the page requesting it.
In production my general domain is www.jungledragon.com
The CSS file that contains the reference to the filter is hosted at a seperate subdomain: static.jungledragon.com. From this CSS file, a reference is made to filters.svg, which is in the same directory at static.jungledragon.com.
I would think that since both the CSS and the SVG file are in the same domain and directory, there should be no issue. Then I considered perhaps the requesting page (not the CSS, but the HTML file) should be in the same domain as the SVG file. Therefore I adjusted the reference inside the CSS file to a hardcoded www.jungledragon.com. That too doesn't help.
Any ideas why Firefox is not picking up the SVG reference properly?