Changing SVG matrix transform doesn't redraw nested text elements to the correct scale

Duplicate Issue #13822572 • See Issue #4320441

Details

Author
Erik B.
Created
Sep 18, 2017
Privacy
This issue is public.
Found in
  • Microsoft Edge
Duplicates
See progress on Bug #4320441
Found in build #
38.14393
Reports
Reported by 1 person

Sign in to watch or report this issue.

Steps to reproduce

Our product leverages matrix transforms on SVG group elements to navigate (pan & zoom) the users view around the embedded SVG document. Changing the matrix transform causes the other SVG objects to redraw correctly, but the included text objects don’t re-render. Toggling certain CSS properties in the debugger will cause Edge to re-render the text correctly.

This issue is causing significant problems to promoting Edge as a supported browser for our web app. In our product, we typically animate the transform matrix using snap.svg, however this problem is also reproducible by manually changing the transform attribute with setAttribute or in the debugger.

I’ve attached a sample HTML file that demonstrates the problem. Click on ‘SCALE’ to do the scaling, notice how the text doesn’t get bigger on Edge but it does on Chrome. Then hit “FIX” and Edge displays it properly, even though all we did was hide and show the thing.

Attachments

1 attachment

Comments and activity

  • Microsoft Edge Team

    Changed Assigned To to “James M.”

    Changed Assigned To to “wptcomptri@microsoft.com”

  • every time i close microsoft edge i get 5 error reports in reliability history edge works ok just when i close it i get the error reports so im back to firefox ive tryed reinstalling my windows 10 reinstalling edge with power shell

  • Microsoft Edge Team

    Changed Assigned To to “bbrinza”

    Changed Status to “Duplicate”

  • This is indeed a known issue. 

    I understand this is a frustrating issue when you hit it, but I do not think we will have bandwidth to fix it soon. 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.getBBox();
       obj.style.display = val;
      }
     }
    }).observe(document.documentElement, { attributes: true, attributeFilter: ['transform'], subtree: true }));
    
    

    Let me know if I can help in any other way. I’m duping this issue to the already-existing one (I don’t know if you will be able to access that information from the public portal).

    Best regards,
    Francois

  • This bug has marked as duplicate. Please follow the parent issue to get new updates.

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

Sign in