EDGE renders SVG "text" incorrectly showing repaint artefacts

Fixed, flighted Issue #5432639

Details

Created
Nov 16, 2015
Privacy
This issue is public.
Fixed in build #
15034
Reports
Reported by 7 people

Sign in to watch or report this issue.

Steps to reproduce

URL:

Repro Steps:

I have this sample online here on JSFiddle: http://jsfiddle.net/kuv3Lpvm/1/

This is what happens in the fiddle: put a simple inline SVG like the following in the page:

<div style="width:500px; height:200px">
<svg xmlns="http://www.w3.org/2000/svg" style="height:200px;width:500px;">
<g id="vp" transform="matrix(2 0 0 2 0 0)">
<g transform="translate(0 0)">
<text transform="translate(0 20)">AAA-BBB-CCC-DDD-EEE-FFF-GGG-HHH</text>
</g>
</g>
</svg>
</div>
<button id="b">Test</button>

And modify the transform programmatically like so, e.g.:

var vp = document.getElementById(“vp”);
document.getElementById(“b”).addEventListener("click", click);
var matrix = vp.transform.baseVal.getItem(0).matrix;

function click() {
matrix.a = matrix.d = Math.random() + 0.5
}

In the fiddle press the “Test” button several times and observe that text begins to overlap itself at those word boundaries where the "-" is in the text. Also there are repaint artefacts whenever the text becomes smaller.

Expected Results:

Text rendering should work as per SVG spec and not cause repaint garbage when updated dynamically on the screen.

Actual Results:

Dev Channel specific:

No

Please see other feedbacks in userfeedback VSO for feedbacks that are tracked by this work item.

Attachments

0 attachments

    Comments and activity

    • Microsoft Edge Team

      Changed Assigned To to “Mara P.”

      Changed Assigned To to “Bogdan B.”

    • Since the “migration” of the issue seems to have removed all comments and repro counters I am pasting my comment again here:

      Looking more closely at the resulting rendering the issue seems to be this: Text seems to be rendered in chunks, a chunk starts with "-" the x-offset of the chunk seems to simply not respect the transform, so no matter what scale transform is applied the x-offset of the next "-" is always at the same screen coordinate - this results in overlaps and repaint issues (because the repaint area seems to be calculated differently than where the text is rendered).

      (see original issue)

    • Hello. Seems you’re right. But what is the suggested solution for this issue?

    • The suggested solution is obviously not to wait for the Edge team to fix this - this has been reported more than a year ago and we reported other issues with Edge long before Windows 10 was officially released almost 2 years ago. They have been closed with “no fix” or are idling since then. I don’t believe anybody is really monitoring these Edge issues anymore. There doesn’t seem to be the willingness to provide a working MS browser for Windows 10. With the current state of the implementation, I would not suggest using Edge for anything serious. It’s not commercially supported and does not seem to be getting any love from the team. If there is a team - the team is more likely busily working on new features and there are only a couple of engineers left working on Edge (if at all) - You should be using Chrome, Firefox, or Opera instead. All these browsers work great on Windows 10 and don’t suffer from issues like these. And if they do, the issues actually get fixed for these browsers, which is a much more solid base for implementing anything serious.

    • Thanks Sebastian! It’s the best and sincerest answer ever… And I’m afraid it’s absolutely true

    • Microsoft Edge Team

      Changed Assigned To from “Bogdan B.” to “Kevin B.”

      Changed Status to “Confirmed”

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

    • We have experienced the same thing when testing with Microsoft Edge 38.14393.0.0

    • Guys, does anybody has some experience how to hack maybe this? It’s annoying thing and I need to make clients happy, I can’t say them just wait until Microsoft will fix it and they get it in windows update…

    • Hi all - thank you for your patience on this. I can confirm that we are investigating the issue. Please stay tuned for further updates.

    • Microsoft Edge Team

      Changed Status from “Confirmed” to “In code review”

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

      Changed Status from “In code review” to “Fixed, not yet flighted”

    • This fix is checked in. It will be in Insider releases in the next 2 weeks and is slated for stable release in the Windows 10 Creators Update.

    • Microsoft Edge Team

      Changed Status from “Fixed, not yet flighted” to “Fixed, flighted”

      Changed Steps to Reproduce

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

    Sign in