3

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?

Community
  • 1
  • 1
Fer
  • 3,794
  • 13
  • 52
  • 98

1 Answers1

2

As per this answer, svg filters only work on xhtml documents, so I'm guessing your local webserver is doing it, but your public one is not.

Add an .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]

Additionally, your svg file reference 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");
}
Community
  • 1
  • 1
methodofaction
  • 64,987
  • 20
  • 140
  • 158
  • Thanks. The public web server is in fact Amazon S3, where I can control the content type of the filter file. It was application/svg+xml. I have now changed it to application/xhtml+xml but it doesn't seem to make any difference for now. – Fer Mar 12 '12 at 20:04
  • You're missing http:// on your svg filter reference, if this doesn't work try serving the html itself (not the svg) as xhtml. – methodofaction Mar 13 '12 at 05:54
  • Thanks, will give this a try tonight. – Fer Mar 13 '12 at 08:11
  • Update: I have tried every possible URL combination all to no avail. I'm now dropping the feature for Firefox users, as the time to get this to work as well as the risk in messing with existing Apache settings are too steep for such a minor feature. Thanks for thinking along, and I'll grant you the correct answer, as it probably is. – Fer Mar 13 '12 at 15:48