Microsoft Edge SVG rendering bug - vanishing text

Fixed Issue #3723601


Jul 28, 2015
This issue is public.
Fixed in build #
Reported by 24 people

Sign in to watch or report this issue.

Steps to reproduce

Repro Steps:


When svg element has <g> child with transform attribute applied and I want to update that attribute (via setAttribute) SVG text nodes vanish.

I’ve created codepen which reproduces that bug: . Just click ‘Update transform’ button and try to scroll content, svg text nodes vanish. I initially thought that it was connected with scale transform applied for parent div (‘update scale’ button) but it seems that it’s not connected, it breaks even without changing parent transform scale.

Expected Results:


After updating SVG <g> element transform attribute svg text nodes should still be visible.

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 “Kevin B.”

      Changed Status to “Confirmed”

      Changed Assigned To from “Kevin B.” to “Kurt C.”

      Changed Assigned To from “Kurt C.” to “IE S.”

      Changed Status from “Confirmed” to “Fixed”

      Changed Title from “Microsoft Edge SVG rendering bug - vanishing text” to “Microsoft Edge SVG rendering bug - vanishing text”

      Changed Steps to Reproduce

      Changed Steps to Reproduce

    • When do we expect to have an update for this fix?

      It is even weird that for a very simple svg with some text, selecting a text could also cause the texts to be morphed.

      Best Regards,

    • Hi,

      Same issue for the following codepen.

      Please just display it and then select the text “kWh/m2/an” within the browser.

      Thanks and best regards

    • This is still a major issue. I have an application that dynamically renders SVGs using Angular. I have it working great in Chrome, Firefox, and IE. However, the text disappears on rendering in Edge. It appears and then disappears as I hover over it, with a CSS hover color change.

    • As of my comment I see this issue is showing as fixed. Do you know what release that will be in, as it is not currently working on my machine.

    • We’re having this same problem with our SVG application. It works ok on all browsers except the latest MS Edge. I created a screen recording to show the problem behavior and how it’s supposed to work. Edge is a great browser. I know this issue can be corrected because it worked ok in a previous version (shown in the recording). I hope this helps.

    • I also have a problem with SVG getting garbled. This happens either when I change the transform. It also happens when I change the cursor of the parent element.

    • This issue states as Fixed, but doesn’t seem to be for me using Edge 25.10586.0.0

    • I still see the same problems across this issue and related issues with SVG in Edge. Hover interrupts text, selecting text garbles its position, zooming alters text position. Using Edge 25.10586.0.0, EdgeHTML 13.10586.

    • Still issues with handling text.
      An older version of Edge (20.10240.16384.0) works perfect just like Chrome; Firefox; Safari; etc.
      Can you look back to that version and bring forward that configuration to the current version?

    • Still issues with text nodes.

      Microsoft Edge 38.14393.0.0
      Microsoft EdgeHTML 14.14393

    • For anyone facing this annoying issue, I discovered a temporary fix, at least it works for me.

      If you are building your SVGs in code, in my case with D3, consider adding an event handler for transform/zoom, then, specifically for EDGE, when the event fires, add a class to the text objects that alters their font-size slightly, and immediately remove the class, with a short interval timer… this seems to be enough to make EDGE re-render the text.

      In my case for example…

      In my pan/zoom event handler I added this after the transformation;

      if (navigator.userAgent.indexOf(‘Edge’) > -1) { d3.selectAll(“.nodetext”).classed("tempclass", true); setTimeout(function () { d3.selectAll(“.nodetext”).classed("tempclass", false); }, 100); }

      using this css class

      .tempclass {font-size:9.05px;}

      My base font size was 9px… I found if I made the temp size any smaller than 9.05, it didn’t seem to cause the re-render. Similarly, I set an interval of 100ms… It worked all the way down to 1ms, except when I had a lot of text going on, or tried to break it with rapid zooming/panning etc… but 100ms seemed about spot on.

      You can quickly test if this will help for you without doing the code-work, open up the dev panel in Edge, find a text item, zoom to cause it to disappear, then add an inline style change for the font… hopefully it will magically reappear for you, at least it does for me.

    • @MS - please update the status of this bug:
      It’s NOT fixed and it’s NOT dev channel specific - at the time of writing it’s still broken in the most current GA EDGE release.
      Alternatively adjust the truth to the tracker information and publish a bug-fix for the bug.

    • Microsoft Edge Team

      Changed Status from “Fixed”

      Changed Assigned To to “Bogdan B.”

      Changed Assigned To from “Bogdan B.” to “Ian P.”

      Changed Status to “Confirmed”

    • I’m encountering this issue when I mouseover an svg thumbnail. Interestingly this issue only occurs for text not drawn on a textPath. Any svgs with a textPath stay put.

      Additionally text elements not drawn on a textPath stay put as well if there’s other text in the svg that has a textPath.

      Also this only affects my text that is not on a textPath and has a text-anchor="middle" attribute. Other text that is not on a path but has text-anchor="start" stays in the right place.

      Unfortunately I couldn’t find a great workaround. For me the problem was triggered by a CSS rule, cursor: pointer on a div containing my svg. So I ended up resetting this rule for Edge with:
      @supports (-ms-ime-align:auto) {
      .selector:hover {
      cursor: initial;

    • Still reproducible using the various codepads here as of Edge 38.14393.0.0. NOT fixed.

    • I also have this problem with a zoomable SVG (I’m using d3.js). This seems like quite an important bug to fix as it is likely to come up in any situation where the SVG is not completely static, especially in data visualisations using d3.js.

    • This seems to have been fixed in EdgeHTML 15 / Edge 40 which ships with the Creators Update (at least in my case).

    • Hi,

      We have a commercial web app that leverages SVG heavily. Currently we only support Chrome and Safari but we would like to include Edge as well. This bug is a big blocker for us. Is there any chance we get a solid fix for this bug any soon?

      Also do you have any plan to fully support SVG features in coming releases?

    • Microsoft Edge Team

      Changed Assigned To from “Ian P.” to “IE S.”

      Changed Status from “Confirmed” to “Fixed”

    • We believe the issue is fixed in the Creators Update (build versions >= 15063). I’ve tried most of the publicly reported cases and cannot repro any listed in this issue that are rooted to the issue we’ve fixed. If you see further problems - please file an issue and we’ll take a look!

    • path:hover {
      fill: darkslateblue;

      just on hover change font-size this is working and its not fault in edge

    • As of 2018 and Edge version 42.17134.1.0 HTML 17.17134 this is still severly broken, although in different ways and many of the original repros don’t show the issue anymore.

      However you can see that it severly broken by looking at this app:

      Use the mouse wheel in the center of the screen to zoom into the diagram onto one of the cards - notice that the telephone numbers get garbled and all kinds of repaint artefacts appear after a certain zoom level (text doesn’t scale along with the zoom anymore, but just moves). Triggering a CSS repaint by moving the mouse across the border of the cards (which triggers a highlight animation) “fixes” the rendering issue. This is the workaround described above in the thread.

      Please reopen or let me me know if you want me to open another issue.

    • Here is a small self-contained repro:

      Please re-evaluate, reopen, and fix.

      The difference to the previous problems was that now, in order to reproduce the issue, it seems there must be a “use” element in the SVG group (even if that use element is empty). Without the use element, the rendering works as expected like on all other browsers. With the use element, text is not scaled correctly and the kerning is broken. Also repaint issues can be observed (though not in the SSCCE).

    • As requested by the Edge team, I opened new issue which is about the newer, more specific problem here:

    • I am still facing same issue in Windows-7 and IE 11.0.70. Text is disappearing on SVG. Please, help.

    • Is there any update available for Windows 7 with IE 11 to fix the issue?
      Please re-evaluate, reopen, and fix or let me know if you want me to open another issue.

      Thanks & Regards.

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

    Sign in