SVG element shifts when using transform-origin in Firefox

Question

So I have this blueprint that I\'ve recreated as an SVG.

Here is the codepen!

Everything works fine in Chrome, but in Firefox, once the rotation

Answer 1

Looks like a bug in FF. I have reported it here.

To work around this bug, you wouldn't want to use different transform-origin coordinates in Firefox. Because when the bug gets fixed it'll be wrong again.

The fault seems to be a rounding error in the transformation (the door shifts by 0.5 SVG units). So the obvious solution is to scale all the coordinates up so that a shift of 0.5 units won't be noticeable any more.

For instance, if you multiply the coords by 10, it seems to work (shift becomes much less noticeable). And if the bug gets fixed in the future, you won't need to change anything.

var room = document.getElementById('g-f-construction-shop');

room.addEventListener('mouseenter', function animateDoors() {
  var doorElement = document.getElementById('g-o-construction-shop-stage-one-door-right-top');
  doorElement.style.transform = 'rotate(90deg)';
    
  setTimeout(function () {
    doorElement.style.transform = 'rotate(0)';
  }, 750);
});

.o-whole, .door {
  stroke: #000;
  stroke-width: 10;
  fill: none;
  opacity: 1;
}
  
.f {
  fill: #ff6600;
  opacity: 0.1;
}
  
.o-door-right-top {
  transition: transform 0.75s;
}

  <svg width="500" height="500" viewBox="1050 1250 200 200" id="svg">
    <g id="ground">
      <!-- ROOM OUTLINE -->
      <path class="o-whole" d="M 1085,1200 v 100" />
      <!-- ROOM FILL -->
      <rect id="g-f-construction-shop" class="f" width="1090" height="2000"/>
      <!-- DOOR -->
      <path
         id="g-o-construction-shop-stage-one-door-right-top"
         class="door o-door-right-top"
         style="transform-origin:1085px 1305px;"
         d="m 1080,1305 h 60"
      />
      <circle cx="1085" cy="1305" r="2" fill="limegreen"/>
    </g>
  </svg>