0

So this was a head scratcher for me.

I needed to have an important style on an svg element due to some js library that was setting the fill on window.resize.

My css is, for this example:

path {
    fill: url("#image") !important;
}

I wrote this all in chrome, and everything was hunky-dory. However, this morning I took a look in FF, and noticed that the svg element wasn't displaying at all.

After much debug, I noticed, that when I removed the styles from the css file that was being linked to from my html document, and added those styles into a < style> tag, firefox started displaying my image as the svg path fill.

Quite odd...

Including any other style does not exhibit the bug, it just seems to be setting an url(#svgPatternId) for the fill, and ONLY does this behavior exhibit when you are setting the !important flag.

TL;DR If you can explain to me why linking the same style vs including it in the HTML as a < style> tag breaks in FF, I'll buy you a beer (or you know, upvotes :P)

Not working in FF: https://jsfiddle.net/s9szby6q/5/

Working in FF: https://jsfiddle.net/s9szby6q/6/

(Firefox version 42.0, mac OS)

j08691
  • 204,283
  • 31
  • 260
  • 272
user1676273
  • 79
  • 6
  • This is a Chrome bug, see [this answer](http://stackoverflow.com/a/32213910/3702797) for details (basically, an IRI problem). Give Robert Longson the upvote, I'll take the free beer – Kaiido Nov 20 '15 at 05:14
  • @Kaiido, thanks for hunting down the answer for me, svg is certainly not my expertise yet and I am always glad to learn the why rather than the how. Let me know how you want that beer :) – user1676273 Nov 20 '15 at 14:40

0 Answers0