Picturefill and SVGs in Firefox

[linnett]

I'm currently using picturefill to implement responsive SVG logos as follows:

<picture>
  <!--[if IE 9]><video style="display: none;"><![endif]-->
  <source srcset="desktop.svg" media="(min-width: 481px)">
  <!--[if IE 9]></video><![endif]-->
  <img srcset="mobile.svg">
</picture>

This solution seems to work perfectly in IE9+, Chrome, Safari.. however, there is an issue with Firefox. It's not showing anything at all. Is there something I need to do to make this work in Firefox?

[mike-engel]

@linnett What version of picturefill and firefox are you using?

[linnett]

The latest version of FF (39) and version 2.3.1 of Picturefill. Thanks

[aFarkas]

@linnett

I can't really reproduce this with the following svg files:

<picture>
    <!--[if IE 9]><video style="display: none;"><![endif]-->
    <source srcset="http://dev.w3.org/SVG/tools/svgweb/samples/svg-files/AJ_Digital_Camera.svg" media="(min-width: 481px)">
    <!--[if IE 9]></video><![endif]-->
    <img srcset="http://dev.w3.org/SVG/tools/svgweb/samples/svg-files/anim1.svg">
</picture>

With picturefill 2.3.1 we don't do anything, because FF supports this in general. With pf 3.0 alpha we do some little tweaks, but this is not a known bug.

Please test with the svg files above and/or the the pf 3.0 version I linked to.

[linnett]

Hey - thanks for the response. I couple things, I tested the code you suggested. The camera always shows, the other SVG never does, even when shrinking and expanding the browser window so there seems to be an issue there. Is that a Firefox bug?

Also, it would appear that the SVG's we have did not have a width and height explicitly set on them. Strange that it's only FF that has this issue though.

[mike-engel]

@linnett It is a known bug in FF38, 39, and probably 40, where responsive images aren't recalculated on window resize.

[linnett]

Oh dear! Bad FF. OK thanks for the help - I'll close this because the problems were with our SVGs and FF.

[albell]

@linnett try this for the FF resize bug:

#512 (comment)