Sometimes, SVG elements vanish or render incorrectly when setting attributes via JavaScript

Issue #5953604 • Assigned to Bogdan B.

Details

Created
Dec 22, 2015
Privacy
This issue is public.
Reports
Reported by 0 people

Sign in to watch or report this issue.

Steps to reproduce

URL:

Repro Steps:

Put the following snippet into an *.html file and load it in Edge:

<!DOCTYPE html>
<html>
<head>
<title>SVG test</title>
<script>
function click() {
document
.getElementById(‘my-element’)
.setAttribute('transform’, 'rotate(0, 0, 0)')
;
}
</script>
</head>
<body>
<svg width="10%" viewBox="0 0 100 100">
<svg width="100" height="100">
<g id="my-element">
<text x="0" y="50" onclick="click()">Hello</text>
</g>
</svg>
</svg>
</body>
</html>

Click the ‘Hello’ text the first time and nothing happens (that’s expected…). Clicking it a second time and the text vanishes. Resize the browser window an the text reappears.

For a more complex sample with different rendering issues, see https://github.com/angular/angular/issues/6050

Expected Results:

Setting the transform attribute to the same value (that doesn’t even have a visual effect) over and over again on each click should not change the rendering.

Actual Results:

Dev Channel specific:

No

Attachments

0 attachments

    Comments and activity

    • Microsoft Edge Team

      Changed Assigned To to “Mara P.”

      Changed Assigned To to “Bogdan B.”

      Changed Assigned To from “Bogdan B.” to “James M.”

      Changed Assigned To from “James M.” to “Bogdan B.”

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

    Sign in