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.
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: http://jsfiddle.net/k14nvcow/
Basically the structure of the SVG is like this:
<defs> <g id="icon"></g> </defs> <g id="vp" transform="matrix(1 0 0 1 0 0)"> <g> <use href="#icon"></use> <text transform="translate(0 20)">11-22-33-44-55</text> </g> </g>
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: https://live.yworks.com/demos/complete/orgchart/
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.
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.”