Firefox and SVG fill for CSS | Matt Crouch

I ran into a bug recently where some SVGs on a website were seemingly ignoring a fill request. A quick check in dev tools showed that the CSS was being applied so... what gives? Turns out Firefox has implemented an overly literal interpretation of part of the (I believe) SVG spec, causing it to add additional child <svg> elements in certain circumstances (which are hidden from dev tools by virtue of reasons). Matt does a better job of explaining the why, but the fix is to do something like this:

.class-name,
.class-name use > svg {
   fill: #FFFFFF;
}

Or, based on our existing patches when I looked that already including overrides for g > svg and some other variations, perhaps simply:

.class-name,
svg.class-name * {
   fill: #FFFFFF;
}

Explore Other Notes

  • I ran into a bug recently where&nbsp;<em>some</em> SVGs on a website were seemingly ignoring a fill request. A&nbsp;quick check in dev tools showed that the CSS was being applied so... what gives? […]
  • Murray Adcock.
Journal permalink

Made By Me, But Made Possible By:

CMS:

Build: Gatsby

Deployment: GitHub

Hosting: Netlify

Connect With Me:

Twitter Twitter

Instagram Instragram

500px 500px

GitHub GitHub

Keep Up To Date:

All Posts RSS feed.

Articles RSS feed.

Journal RSS feed.

Notes RSS feed.