Firefox bug: Incorrect getScreenCTM when parent div is transformed

by kzima

HTML

<div id="container" style="transform: translateX(50px)">
    <svg id="svg" width="100" height="100">
      <svg id="svg2" width="100" height="100">
        <rect id="rect" fill="red" width="100" height="100"></rect>
        </svg>
    </svg>
</div>

CSS

#container {
  -webkit-transform: translateX(50px);
          transform: translateX(50px);
}

JavaScript

var container = document.querySelector("#container");
var svg = document.querySelector("#svg");
var svg2 = document.querySelector("#svg2");
var st = window.getComputedStyle(container, null);

var tr = st.getPropertyValue("-webkit-transform") ||
         st.getPropertyValue("-moz-transform") ||
         st.getPropertyValue("-ms-transform") ||
         st.getPropertyValue("-o-transform") ||
         st.getPropertyValue("transform");
         
var container = document.querySelector("#container");
var svg = document.querySelector("#svg");
var rect = document.querySelector("#rect");

var topLeft = svg.createSVGPoint(0, 0);
/* svg.getScreenCTM().e - svg.getBoundingClientRect().x */
const m = svg.getScreenCTM();
m.e = svg.getBoundingClientRect().x ;
 m.f =  svg.getBoundingClientRect().y ;
var screenPosition = topLeft.matrixTransform(svg2.getScreenCTM());

// Should print ~58
console.log(screenPosition.x,svg.getScreenCTM(), svg.getCTM(), svg.getBoundingClientRect());

console.log(tr)