SVG Texts move and disappear in EDGE - by Sebastian Mueller

Status : 

  External<br /><br />
		This item may be valid but belongs to an external system out of the direct control of this product team.<br /><br />
		A more detailed explanation for the resolution of this particular item may have been provided in the comments section.


ID 1567173 Comments
Status Closed Workarounds
Type Bug Repros 17
Opened 7/20/2015 1:43:41 AM
Access Restriction Public

Description

In some cases when the SVG DOM is manipulated using Javascript, svg text elements seem to be not rerendered or rendered at the wrong location. The browser still "thinks" the elements are at the right location (e.g. the I-Beam cursor is displayed at the correct location and the F12 tools correctly identify the empty spot as the location of the text element), but they are rendered elsewhere (possibly outside the viewport).
Modifying more properties in the F12 dev tools or via Javascript, e.g. that should not influence the text rendering at all, sometimes make the elements appear again at the right location. 
It seems the "dirty" flag sometimes is cleared or not honored or the location of the text is recalculated badly during (partial?) repaints.

Sign in to post a comment.
Posted by bstewart1 on 3/2/2017 at 3:49 PM
Confirmed to be still reproducible using Sebastian Mueller's jsfiddle https://jsfiddle.net/8g0fgqaj/ as of Edge 38.14393.0.0
Posted by Sebastian Mueller on 11/21/2016 at 12:17 AM
Note that this very issue has been moved to
https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/3723603/ (contrary to what is stated below).
There, it is marked as a duplicate of https://developer.microsoft.com/microsoft-edge/platform/issues/3723601/ which is marked as "fixed" and "dev-channel-specific" - both of which is not the case at the time of writing.
If you find this comment, please add your comments or "can reproduce" votes to both of the above issues.
Posted by Sebastian Mueller on 4/4/2016 at 11:46 PM
For all those still watching this issue (which does not seem to include MS) - please comment on the "moved" issue below: Currently the "moved" issue is declared as "reproducible by zero people (opposed to 16 here) and only applicable to dev channel (opposed to all version of Edge here) and as "fixed", (opposed to not fixed). That's a clever way of closing issues - simply linking to another issue and removing all repros... </sarcasm>
I am loosing my faith in the willingness of the Edge team to deliver a browser that is HTML5 compliant with working SVG... Edge has been available for almost a year and the zero-day feature bug is still there and is ignored.
Posted by Microsoft on 4/4/2016 at 3:21 PM
We've moved! This issue is now being tracked at https://developer.microsoft.com/microsoft-edge/platform/issues/3723601/
Posted by Bob Peyser on 1/15/2016 at 11:21 AM
This is still a problem with latest "stable" public Edge release:

Edge 25.10586.00
EdgeHTML 13.10586
Posted by Sebastian Mueller on 1/12/2016 at 1:10 AM
I investigated this a bit more:

I found that this does not even need Javascript interaction anymore. I now have a test case that displays a static SVG with some text. As soon as you try to select the text with the mouse (no Javascript involved!), you will notice that it works for the very first time (the I-Beam cursor is displayed at the correct location), but after the next repaint everything breaks and the text is not displayed anymore or badly. From then on the I-Beam cursor is only displayed at locations that seem to indicate that the bounds of the text does not consider the scaling anymore correctly. This results in letters being rendered at the wrong (X) location and possibly outside the viewport so they disappear. Here is the test-case: http://jsfiddle.net/y09v42ea/ Try selecting the text in the static SVG. It will work for the SVG on the bottom but not at the top (which exhibits the behavior described above). The transform from the parent g-element seems to be not taken into account correctly. If the transform is applied to the text element directly, the code does not seem to break.

Since what seems to be the "cached bounds" of the element is incorrect, in some (interactive) scenarios this means that text will sometimes disappear (because the cached bounds get outside of the clipped viewport). This happens in our real world application to many of our customers who gave Edge a shot and found it to be not working in more complex SVG scenarios.
Posted by Sebastian Mueller on 12/1/2015 at 1:16 AM
Note that my test in the previous comment is a regression to 20.10240.16384.0 where this specfic test actually worked.
Posted by Sebastian Mueller on 12/1/2015 at 12:20 AM
I was able to get a much simpler repo that still shows the issue, even after the "slight improvements" with the last update.
Here is the fiddle: https://jsfiddle.net/8g0fgqaj/
On Edge 25.10586.0.0 HTML 13.10586 this makes the SVG text immediately disappear even if the "change" in the Javascript DOM is a no-op ("matrix.a = matrix.a").

For reference this is the fiddle's contents:
DOM:
<button onClick="myclick()">Click Me</button>
<button onClick="myFix()">Try Fix Me</button>
<div style="position:relative;width:600px; height:600px; background:lightblue">
    <svg xmlns="http://www.w3.org/2000/svg" style="position:absolute;top:0;left:0;height:100%;width:100%">
        <g id="vp" transform="matrix(6.19174 0 0 6.19174 2538.14 -372.783)">
            <g transform="translate(-373.2 114.528)">
                <text transform="translate(0)" dy="1em">This is so buggy!</text>
            </g>
        </g>
    </svg>
</div>

Javascript:
var vp = document.getElementById("vp");

var matrix = vp.transform.baseVal.getItem(0).matrix;

function myclick() {
    matrix.a = matrix.a;
}

function myFix() {
    vp.parentElement.style.cursor = vp.parentElement.style.cursor == "crosshair" ? "default" : "crosshair";
}

window.myclick = myclick;
window.myFix = myFix;



This bug causes all text to disappear in our applications once the user slightly zooms into the diagrams. This makes Edge barely unusable for all our customers. Please fix this!
Posted by Dodev on 10/23/2015 at 9:16 AM
Hi!

While I was trying to reproduce it on jsfiddle, my test machine got an update and after the reboot I couldn't reproduce the glitch anymore. So I think that my problem is solved, I just have to confirm it with the QA team.

Anyway, here's my fiddle - http://jsfiddle.net/dodev/uveq1a84/39/ It reproduces the bug (I've tested it on machines without any Edge updates).
The problem was that the SVG element was wrapped in a container that had a style.transform property set and the text elements in the SVG were wrapped in a <g> elemnt with transform attribute set.
Posted by Sebastian Mueller on 10/21/2015 at 3:32 AM
Hi Dodev!
Can you post a small self-contained fiddle that shows the problem you are seeing. I fail to come up with a small example that exhibits the problematic behavior. Feel free to base it on my older (now working) fiddle: http://jsfiddle.net/yGuy/tLrL0dgc/
Posted by Dodev on 10/20/2015 at 9:38 AM
Hi! I'm experiencing this problem in production, too. The complaints we're getting from the feedback channel is steadily increasing with the growth of edge's browser share.
I noticed something which can be of use - the text fails to render as soon as the point (0, 0) leaves the visible part of the containing block. Since our product is dragable and zoomable scheme (implemented in SVG) every time the user drags the beginning of the coordinate system out of the viewport the SVG canvas goes bananas and all the text elements start to randomly disappear and blink.

I hope my observations are helpful. If you need more details, I'm ready to provide it.
Posted by Sebastian Mueller on 10/14/2015 at 6:18 AM
Today I found out that after installing these updates:
KB2267602 (windows defender - probably unrelated)
KB3097617 "system update"
KB890830 (windows defender - probably unrelated)
KB3099406 ("flash on windows")
Suddenly my test-case below from the older comment does *not* break anymore. So although the version of EDGE did not change with the update, the situation seems to have improved *a little*.
It has not been fixed, however since my original problem is still reproducible:

Steps to reproduce the original problem:
Go to this page with Microsoft Edge 20.10240.16384.0 (with or without the above mentioned windows KB updates):
- http://live.yworks.com/yfiles-for-html/1.3/demos/complete/demo.yfiles.graph.bpmneditor/index.html
- wait for the page to load,
- look at the text labels in the diagram and zoom into the diagram using the mouse wheel or the zoom button in the toolbar (not using browser zoom).
- observe that whenever elements are moved out of the viewport texts disappear or jump around the graphic randomly - they should stay right at their location.
- this can also be observed when left-dragging the mouse in the diagram with the CTRL key pressed which results in a pan: whenever elements are removed from the SVG DOM (which happens when they are panned out of the viewport), texts shortly disappear or jump and with the next repaint most of the time they reappear.

Although the situation has improved, the situation is still that we cannot recommend using Edge when SVG text rendering is used in an application.
Posted by Sebastian Mueller on 8/20/2015 at 9:21 AM
I was able to create a very small self-contained test-case for this bug. Please see this fiddle: http://jsfiddle.net/yGuy/tLrL0dgc/
-press the "test" button (multiple times)
-all of the three lines of svg text should move to the right (the transform of the parent G element is changed on every click)
-after a few clicks the third line of text simply disappears
-playing with the splitter or the page sometimes makes the text reappear, but sometimes the first line of text stops moving and repaint problems can be observed.

This is the test case:

<div style="width:200px; height:200px">
<svg xmlns="http://www.w3.org/2000/svg" style="background:yellow;height:200px;width:200px;">
    <g id="vp" transform="matrix(5.95954 0 0 5.95954 -4848.24 -4411.75)">
     <g transform="translate(705 765)">
     <text transform="translate(80 -15)">ABCDEFGHIJKLMNOP</text>
     <text transform="translate(80 0)">ABCDEFGHIJKLMNOP</text>
     <text transform="translate(80 15)">ABCDEFGHIJKLMNOP</text>
     </g>
    </g>
</svg>
</div>

<button id="b">Test</button>


With this Javascript:

var vp = document.getElementById("vp");

document.getElementById("b").addEventListener("click", click);

function click(){
vp.transform.baseVal.getItem(0).matrix.e += 10;
}

Disappearing text in SVG makes our library (and other applications that use dynamic SVG) barely unusable in EDGE - please investigate!
Posted by Charles [MSFT] on 7/28/2015 at 2:42 PM
Thanks for the feedback - we're investigating.