Broken Text Rendering in dynamic SVGs

Confirmed Issue #18322813 • Assigned to Greg W.


Sebastian M.
Jul 19, 2018
This issue is public.
Found in
  • Microsoft Edge
Found in build #
Reported by 3 people

Sign in to watch or report this issue.

Steps to reproduce

When Text is rendered inside SVGs as text elements and the elements reside inside a g element whose transform is modified, sometimes the text rendering transform is not applied correctly. This results in text not appearing at all or disappearing, text overlapping other elements or with itself and text not scaling along with the rest of the graphics.

There were previous bugs that looked similar, which have been fixed in the meantime.

The difference with this bug seems to be the presence of use shadow DOM trees which interfere with the update notification process. It seems some update notification does not properly escape from these shadow trees or the dirty flagging gets inconsistent due to the presence of use elements in the same SVG subtree.

A self-contained, executable repro of the bug is here:

Basically the structure of the SVG is like this:

    <g id="icon"></g>
 <g id="vp" transform="matrix(1 0 0 1 0 0)">
      <use href="#icon"></use>
      <text transform="translate(0 20)">11-22-33-44-55</text>

When the transform of the “vp” element (“viewport camera transform”) is modified via JavaScript (e.g. by scaling the drawing via matrix manipulation in a setInterval), the text is rendered incorrectly: The scale of the text stays the same (the initial one?) and only the location of the text chunks is updated.

Also the dirty rect calculation is affected by this and the clipping is wrong. Other repaint artifacts can be seen in slightly more complicated test cases.

The rendering can be “fixed” for one frame by click selecting the text with the mouse, or changing some unrelated CSS properties. Probably any action that more globally invalidates render state temporarily fixes the issue for one frame.

Note that if the (empty) use element is removed from the test-case, everything works as expected. Also removing the nested second g (the parent of the text) works around the problem in this case.

For a more complex real-world application that shows the broken rendering and dirty-rect calculation problems see this demo:
Use the mouse wheel in the center of the screen to zoom into the diagram onto one of the cards - notice that the text and telephone numbers get garbled and all kinds of repaint artifacts can be observed. Triggering a CSS repaint by moving the mouse across the border of the cards (which triggers a highlight animation) “fixes” the rendering issue.


0 attachments

    Comments and activity

    • Microsoft Edge Team

      Changed Assigned To to “wptlaytri”

      Changed Assigned To from “wptlaytri” to “Saqib A.”

      Changed Status to “Confirmed”

      Changed Assigned To from “Saqib A.” to “Greg W.”

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

    Sign in