Updating svg transforms does not update the rendering of contained foreignObject

Confirmed Issue #4320441 • Assigned to Kurt C.


Aug 21, 2015
This issue is public.
Reported by 4 people

Sign in to watch or report this issue.

Steps to reproduce


Repro Steps:

Create an SVG with a foreign object element that shows HTML text.
Modify a transform in the ancestry of the foreign HTML that should affect the HTML using Javascript. Observe that the HTML is not rendered correctly until another change is made to the DOM.

See full working example here: https://jsfiddle.net/yGuy/2j43ce0b/

Click on the “Bug” button and observe that the text “Bug” is not scaled correctly, whereas the white rectangle is scaled.
Click on the “Fix” button to toggle an unrelated CSS class and indirectly trigger a repaint that fixes the issue.
This can be done repeatedly.

This is the DOM:
<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>

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

And this is the 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("style", toggle ? “background:yellow;height:200px;width:200px; cursor:wait;” : “background:yellow;height:200px;width:200px;”);
toggle = !toggle;

Expected Results:

The rendering should always reflect the SVG DOM and and foreign object state. The HTML rendering should always transform along with the rest of the SVG correctly.

Actual Results:

Dev Channel specific:



0 attachments

    Comments and activity

    • Microsoft Edge Team

      Changed Assigned To to “Mara P.”

      Changed Assigned To to “Rossen A.”

      Changed Assigned To from “Rossen A.” to “Kurt C.”

      Changed Status to “Confirmed”

    • i am also facing same issue as people has mentioned above.please update for this issue

    • Microsoft Edge Team

      Changed Title from “EDGE's New Foreign Object Support in SVG does not work correctly with dynamic SVG” to “Updating svg transforms does not update the rendering of contained foreignObject”

    • If you need a workaround to support our browser, here is one:

      void(new MutationObserver(function(muts) {
       for(var i = muts.length; i--;) {
        var mut = muts[i], objs = mut.target.querySelectorAll('foreignObject');
        for(var j = objs.length; j--;) {
         var obj = objs[j];
         var val = obj.style.display;
         obj.style.display = 'none';
         obj.style.display = val;
      }).observe(document.documentElement, { attributes: true, attributeFilter: ['transform'], subtree: true }));
    • This is unrelated to ForeignObject and is a general issue with SVGTransform and its associated matrix where changes to the matrix do not affect the rendering of element with the transform ( in its SVGTransformList ). Additionally re-calling set… methods does not have an effect either.

    • An alternative fix is to replace the SVGTransform with another.

    You need to sign in to your Microsoft account to add a comment.

    Sign in