IE Edge SVG Foreign Object Rendering Bug

Edge has problems repainting Foreign Objects when the transform changes. This results in misplaced and badly scaled html rendering. Press the Bug button - the SVG along with the foreign object HTML Text should scale. Pressing the "Fix" button changes some unrelated CSS class in the SVG which somehow triggers a repaint that corrects the problem.

HTML

<div style="width:200px; height:200px">
  <svg xmlns="http://www.w3.org/2000/svg" id="svg" style="background:yellow;height:200px;width:200px;">
    <g id="vp" transform="matrix(0.5 0 0 0.5 0 0)">
      <g xmlns="http://www.w3.org/2000/svg" transform="translate(10 10)">
          <rect x="0" y="0" width="100" height="140" fill="white"/>
          <foreignObject x="0" y="0" width="100" height="140"><div style='font-family: "Segoe UI", Arial; font-size: 11px; font-style: normal; font-weight: normal;' width="95.5199966430664px" height="133.52996826171875px"><h2>Bug</h2></div></foreignObject>
          </g>
    </g>
  </svg>
</div>

<button id="b">Bug</button>
<button id="f">Fix</button>

JavaScript

var svg = document.getElementById("svg");
var vp = document.getElementById("vp");

document.getElementById("b").addEventListener("click", bug);
document.getElementById("f").addEventListener("click", fix);
var matrix = vp.transform.baseVal.getItem(0).matrix;

function bug(){
    matrix.a = matrix.d = matrix.a * 1.2;
}

var toggle = true;

function fix(){
    svg.setAttribute("class", toggle ? "font-family: 'Segoe UI', Arial; font-size: 11px; font-style: normal; font-weight: normal;' : "aurevoir");
    toggle = !toggle;
}