Microsoft Edge SVG rendering bug - vanishing text

Fixed, not yet flighted Issue #3723601

Details

Created
Jul 28, 2015
Privacy
This issue is public.
Reports
Reported by 20 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: http://codepen.io/tadeuszwojcik/pen/aOaZGp . 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:

================

Yes

Attachments

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 Status from “Fixed” to “Fixed, not yet flighted”

      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,
      Duy.

    • Hi,

      Same issue for the following codepen.
      http://codepen.io/seamus313131/pen/vGopBv

      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.

      http://esaanalytics.screencasthost.com/watch/cDn1r6hPqK

    • 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.

      http://taquilla.orquestadeextremadura.com/shows/seats/26/24/cine-de-chaplin

      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, not yet flighted”

      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.
      http://codepen.io/seamus313131/pen/vGopBv
      https://jsfiddle.net/8g0fgqaj/

    • 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, not yet flighted”

    • 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!

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

    Sign in