Scaling SVG g with text to 0 crashes tab

Fixed Issue #8198650

Details

Author
Tyler S.
Created
Jul 17, 2016
Privacy
This issue is public.
Found in
  • Microsoft Edge
Found in build #
13.10586
Reports
Reported by 1 person

Sign in to watch or report this issue.

Steps to reproduce

Given this SVG element in an HTML page:

<svg id="demo" width="150" height="100" viewBox="0 0 150 100">
  <g id="group">
    <circle cx="50" cy="50" r="50" fill="#B10DC9" id="circle"/>
    <text id="some-text" font-size="40" fill="#FFF" x="50" y="50">1</text>
  </g>
</svg>

And this JavaScript:

var group = document.getElementById('group');

function setScale(element, scale) {
  element.setAttribute("transform", "matrix(" + scale + ",0,0," + scale + ",0,0)");
}

setScale(group, 1);

setTimeout(function() {
  setScale(group, 0.5); //scale to 50% after 500ms
}, 500);
setTimeout(function() {
  setScale(group, 0); //scale to 0% after 1000ms (BUG! scale to even 0.001 and it's fine)
}, 1000);
setTimeout(function() {
  setScale(group, 0.5); //scale back to 50% after 1500ms
}, 1500);

The browser tab will attempt the transform, reload the tab, then eventually show an error:

This page is having a problem loading
We tried to load this page for you a few times, but there is still a problem with this site. We know you have better things to do than to watch this page reload over and over again so try coming back to this page later.

Scaling to any value other than zero (0.0001 for example) does not have this problem.

Attachments

0 attachments

    Comments and activity

    • Microsoft Edge Team

      Changed Assigned To to “Ibrahim O.”

      Changed Status to “Fixed”

    • Thank you for the feedback. This issue appears to be fixed and the fix is currently available in the latest Windows Insider Preview which also will be available in public stable soon. 

      Best regards,
      The MS Edge Team

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

    Sign in