SVG path element scale transition bug in Firefox browser - css

Question

I am trying to animate a svg path element on hover by adding transform scale transition on it.
It works perfectly as intended on chrome, but on firefox it breaks the transition.
Note: It works without transition animation, but transition is needed in this use case.
HTML:
<svg viewBox="-1.1 -1.1 2.2 2.2">
<g>
<path d="M 1 0 A 1 1 0 0 1 -0.8085734960732691 0.5883951915573843 L 0 0" fill="#ACC6D9" stroke="#ACC6D9" stroke-width="0.01"></path>
<path d="M -0.8085734960732691 0.5883951915573843 A 1 1 0 0 1 -0.8100500340267164 -0.5863607612837983 L 0 0" fill="#93B5D1" stroke="#93B5D1" stroke-width="0"></path>
<path d="M -0.8100500340267164 -0.5863607612837983 A 1 1 0 0 1 0.3063859980740773 -0.9519073590345604 L 0 0" fill="#81A8C9" stroke="#81A8C9" stroke-width="0"></path>
<path d="M 0.3063859980740773 -0.9519073590345604 A 1 1 0 0 1 0.999992891049955 -0.0037706563822101314 L 0 0" fill="#6E9CC1" stroke="#6E9CC1" stroke-width="0"></path>
</g>
<circle cx="0" cy="0" r="0.5" fill="#393D45"></circle>
</svg>
CSS:
path{
transition: transform 0.2s;
}
path:hover{
transform: scale(1.1);
}
JSFiddle link: https://jsfiddle.net/tpkjf15b/2/
Edit:
Chrome 80 (desired output): GIF
Firefox 74 (broken): GIF

Answer 1

This is a weird bug, apparently caused by the fractional stroke-width as demonstrated by this reduced case:
path {
transform: scale(1, 1);
transition: transform 0.2s linear;
}
path:hover {
transform: scale(1.1, 1.1);
}
:checked ~ svg path {
stroke-width: 0.1;
stroke: red;
}
<input id="inp" type="checkbox"><label for="inp">add stroke</label><br>
<svg viewBox="-2.5 -2.5 10 10" width="300">
<path d="M0 0 L2.5 0 L0 2.5 Z" fill="#ACC6D9"></path>
<circle cx="0" cy="0" r="0.5" fill="#393D45"></circle>
</svg>
So for your case, since the strokes are set to the same color as the fills, you may be able to avoid this bug by redefining your shapes in a way you don't need that stroke hack. I guess you used it to avoid antialiasing artifacts, but instead of such an hack, you'd be better using integer coordinates when possible, or maybe simply using a viewBox that would allow stroke-width to be 1 could work.
Also, I didn't checked if this bug has already been referenced, but I can still reproduce on Nightly 76, so you might want to open an issue on Mozilla's bugzilla.

Answer 2

You need to write css transform: translate3d(0px,0px,1px) scale(1); property on path before hover and with hover need to write something like transform: translate3d(0px,0px,1px) scale(1.1);
Finally transform: translateZ(1px); make it run perfectly in FF.
Works too: transform: translate3d(0px,0px,1px);
I hope this will help you lot.
path{
transform: translate3d(0px,0px,1px) scale(1);
transition: transform 0.2s;
}
path:hover{
transform: translate3d(0px,0px,1px) scale(1.1);
}
<svg viewBox="-1.1 -1.1 2.2 2.2" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="backface-visibility: hidden;">
<g>
<path d="M 1 0 A 1 1 0 0 1 -0.8085734960732691 0.5883951915573843 L 0 0" fill="#ACC6D9" stroke="#ACC6D9" stroke-width="0.01"></path>
<path d="M -0.8085734960732691 0.5883951915573843 A 1 1 0 0 1 -0.8100500340267164 -0.5863607612837983 L 0 0" fill="#93B5D1" stroke="#93B5D1" stroke-width="0"></path>
<path d="M -0.8100500340267164 -0.5863607612837983 A 1 1 0 0 1 0.3063859980740773 -0.9519073590345604 L 0 0" fill="#81A8C9" stroke="#81A8C9" stroke-width="0"></path>
<path d="M 0.3063859980740773 -0.9519073590345604 A 1 1 0 0 1 0.999992891049955 -0.0037706563822101314 L 0 0" fill="#6E9CC1" stroke="#6E9CC1" stroke-width="0"></path>
</g>
<circle cx="0" cy="0" r="0.5" fill="#393D45"></circle>
</svg>