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">
        <rect id="rect" fill="red" width="100" height="100"></rect>
    </svg>
</div>

CSS

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

JavaScript

var container = document.querySelector("#container");
var svg = document.querySelector("#svg");

var topLeft = svg.createSVGPoint(0, 0);


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);
var screenPosition = topLeft.matrixTransform(rect.getScreenCTM());

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

console.log(tr)