Firefox rendering: stretching chevron

[davewhiteland]

Firefox seems to be stretching a the "click a map, over there dude" chevron oddly:

FF 41.0.1
Doesn't do this on Chrome or Safari.

[dracos]

The SVG is 27x33, with the background size set to 63x33 – Chrome/Safari implement this by keeping the SVG at its size and having space to the right, Firefox appears to stretch the SVG to fill the size. Dunno which is right

[zarino]

I think Firefox is actually doing the right thing here. You tell it to set the background image to be 63px wide, so it stretches it to be 63px wide. That's what the spec says it should do. I'm not sure why Chrome/Safari doesn't stretch it.

Anyway, all this is happening because we want to position the right edge of the arrow 46px from the right edge of the element. Which isn't possible in CSS.

You could bake that 46px into the SVG itself though, by making the SVG itself 63×33px (where the rightmost 46px are just empty). So your SVG markup would look like:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="63" height="33">
    <polygon points="0,0 13,0 26,16 13,32 0,32 13,16" fill="#ffffff"/>
</svg>

(Note width="27" has changed to width="63")