Problem with transform-box: fill-box and firefox - animation

Question

I am facing a problem with an svg file in firefox which I was able to boil down to the following code (the original image had a couple of thousend lines of code):
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="15 15 70 70">
<style type="text/css"><![CDATA[
.sun {
transform-box: fill-box;
animation-name: sun-spoke-rotate;
transform-origin: 50%;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-duration: 6s;
}
.sun path {
transform-box: fill-box;
animation-name: sun-spoke-scale;
transform-origin: 50%;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-duration: 6s;
}
#keyframes sun-spoke-scale {
0% { transform: scale(1,1) }
100% { transform: scale(.5,.5) }
}
#keyframes sun-spoke-rotate {
0% { transform: rotate(0); }
100% { transform: rotate(360deg); }
}
]]></style>
<g class="cloud">
<g class="sun">
<path
d="M80.029,43.611h-3.998c-1.105,0-2-0.896-2-1.999s0.895-2,
2-2h3.998c1.104,0,2,0.896,2,2S81.135,43.611,80.029,43.611z"/>
<path
d="M58.033,25.614c-1.105,0-2-0.896-2-2v-3.999c0-1.104,0.895-2,2-2c1.104,
0,2,0.896,2,2v3.999C60.033,24.718,59.135,25.614,58.033,25.614z"/>
<path
d="M42.033,41.612c0,1.104-0.896,1.999-2,1.999h-4c-1.104,
0-1.998-0.896-1.998-1.999s0.896-2,1.998-2h4C41.139,39.612,42.033,40.509,42.033,41.612z"/>
<path
d="M58.033,57.61c1.104,0,2,0.895,2,1.999v4c0,1.104-0.896,2-2,2c-1.105,
0-2-0.896-2-2v-4C56.033,58.505,56.928,57.61,58.033,57.61z"/>
<circle
style="paint-order: stroke; fill: #f0daba; stroke: #4a4f55; stroke-width: 8px"
cx="58.033"
cy="41.612"
r="7.999"/>
</g>
</g>
This works as expected in chrome and the newest version of edge. It of course doesn't work at all in Internet Explorer but what really bothers me is that I also has issues in firefox. It works well --- until I start moving the mouse??!! Then it starts to jump all over the place. I figured it has something to do with the transform-box: fill-box. Any ideas?

Answer 1

Replace 50% in transform-origin with the coordinates of the center of rotation in pixels
You can get the coordinates of the center of rotation using the Javascript getBBox() method
The property transform-box: fill-box; in this case must be removed from the CSS rules
// Calculating the center of rotation
let bb = sun.getBBox();
console.log(bb.x + bb.width / 2);
console.log(bb.y + bb.height / 2);
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="15 15 70 70" style="border:1px solid;">
<style type="text/css"><![CDATA[
#sun {
animation-name: sun-spoke-rotate;
transform-origin: 58.03px 41.61px;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-duration: 6s;
}
#keyframes sun-spoke-rotate {
0% { transform: rotate(0); }
100% { transform: rotate(360deg); }
}
#sun path {
animation-name: sun-spoke-scale;
transform-origin: 58.03px 41.61px;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-duration: 6s;
}
#keyframes sun-spoke-scale {
0% { transform: scale(1,1) }
100% { transform: scale(.5,.5) }
}
#keyframes sun-spoke-rotate {
0% { transform: rotate(0); }
100% { transform: rotate(360deg); }
}
]]></style>
<g class="cloud">
<g id="sun">
<path
d="M80.029,43.611h-3.998c-1.105,0-2-0.896-2-1.999s0.895-2,
2-2h3.998c1.104,0,2,0.896,2,2S81.135,43.611,80.029,43.611z"/>
<path
d="M58.033,25.614c-1.105,0-2-0.896-2-2v-3.999c0-1.104,0.895-2,2-2c1.104,
0,2,0.896,2,2v3.999C60.033,24.718,59.135,25.614,58.033,25.614z"/>
<path
d="M42.033,41.612c0,1.104-0.896,1.999-2,1.999h-4c-1.104,
0-1.998-0.896-1.998-1.999s0.896-2,1.998-2h4C41.139,39.612,42.033,40.509,42.033,41.612z"/>
<path
d="M58.033,57.61c1.104,0,2,0.895,2,1.999v4c0,1.104-0.896,2-2,2c-1.105,
0-2-0.896-2-2v-4C56.033,58.505,56.928,57.61,58.033,57.61z"/>
<circle
style="paint-order: stroke; fill: #f0daba; stroke: #4a4f55; stroke-width: 8px"
cx="58.033"
cy="41.612"
r="7.999"/>
<circle
</g>
</g>