Bug sur ancien Firefox avec sprite SVG

Version de Firefox inconnue, mais problème présent au moins jusqu'à la version 51. Versions récentes sont OK.

by oilvier

HTML

<svg width="0" height="0" style="position:absolute">
		<symbol viewBox="0 0 17 10.8" id="ico-arrow-bottom" xmlns="http://www.w3.org/2000/svg"><path d="M17 2l-2-2-6.5 6.7L2 0 0 2l8.5 8.8L17 2z"/></symbol>
</svg>

<h1>3 options pour appliquer une transformation sur un sprite SVG</h1>
<ol>
<li>sur la classe du SVG : <code>.foo {}</code></li>
<li>sur les SVG enfants de notre sélecteur : <code>.bar svg {}</code></li>
<li>sur les SVG enfants directs de notre sélecteur : <code>.baz > svg {}</code></li>
</ol>
<div>
<svg class="ico-arrow-bottom foo" aria-hidden="true">
<use xlink:href="#ico-arrow-bottom"></use>
</svg>
</div>


<div class="bar">
<svg class="ico-arrow-bottom" aria-hidden="true">
<use xlink:href="#ico-arrow-bottom"></use>
</svg>
</div>
<div class="baz">
<svg class="ico-arrow-bottom baz" aria-hidden="true">
<use xlink:href="#ico-arrow-bottom"></use>
</svg>
</div>

<img src="file:///Users/oliviercomastri/Desktop/test.svg.svg#ico-arrow-bottom" alt="" />

<h2>Voici le résultat obtenu sur les anciennes versions de Firefox (au moins jusqu'à Firefox 51)</h2>
<p>
Lorsque l'on cible les SVG enfants d'un sélecteur, la transformation s'applique aussi au SVG appelé dans le <code>use</code>, elle est donc "doublée".
</p>
<img...

SCSS

.ico-arrow-bottom,
div {width: 17px; height: 11px;}


.foo,
.bar svg,
.baz > svg {transform:scale(2.5) translate(-25%, -25%);}













div {margin:20px; background-color:tomato;}
body {margin:20px; font-family:sans-serif;}

h1,
h2 {font-weight: bold;}
li {list-style:roman inside;}

h1 {font-size:1.5em;}
h2 {font-size:1.2em;}