1

I'm currently facing a problem I don't know how to solve. While applying a CSS3 grayscale filter to some images, it works on my localhost, but on the live site the images appear white (ie. are invisible).

Relevant CSS:

.preview .preview-thumb {
  width: 200px;
  height: 150px;
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
  filter: url(grayscale.svg#greyscale);
  filter: gray;
}

.preview:hover .preview-thumb {
  -webkit-box-shadow: 0 0 3px 3px gray;
  -moz-box-shadow: 0 0 3px 3px gray;
  box-shadow: 0 0 3px 3px gray;
  -webkit-filter: none;
  -moz-filter: none;
  -ms-filter: none;
  -o-filter: none;
  filter: none; 
}

Relevant HTML:

<div class="preview-container" data-category-id="3">
  <div class="preview">
    <a href="project.php?id=3">
      <img class="preview-thumb" src="projects/architectuur/Masterproject Wilsele/grote maquette.jpg"/>
    </a>
    <span class="preview-name">Masterproject Wilsele</span>
  </div>
</div>

Relevant directory structure:

/
  css
    grayscale.svg
    style.css
  page.html

Correct output on localhost: correct output Incorrect output on remote host (live site): incorrect output

Both screenshots were made using the same browser (Firefox 33.0 on Ubuntu 14.04). Everything works fine when using Chrome (Version 38.0.2125.104 (64-bit) on Ubuntu 14.04), so my guessing is that the problem originates from the url(grayscale.svg#greyscale) hack.

Any ideas on how to solve this? The SVG file I'm using is downloaded from this site.

3
  • Put the html. You may be having problems of URL referencing. What I mean is that the URL on the server may be pinpointing to a wrong location
    – Jose A
    Oct 16, 2014 at 18:58
  • @RobertLongson I do not have a base tag in my html. The relevant page is corporaal.be/projects.php.
    – Tom Knapen
    Oct 16, 2014 at 19:22
  • Did you fix something? It looks fine for me on Chrome v38 on Mac.
    – Brian
    Oct 16, 2014 at 19:57

1 Answer 1

4

Whenever people have a "works from localhost but not from remote server" problem with SVG files, it almost always turns out to be that your web server is not returning the right MIME type for your SVG file.

Make sure the web server is returning your grayscale.svg file with a Content-type of "image/svg+xml". The simplest way to check is by using the "Net" tab in your browser dev tools.

Update

After looking at your actual site I discovered this warning in the console:

Content Security Policy: The page's settings blocked the loading of a resource at
          http://corporaal.be/css/grayscale.svg ("default-src 'none'").

You need to modify your Content Security Policy header to allow the SVG to be loaded. Try changing default-src to 'self'.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.