Internet Explorer 11 SVG Bugs on Windows 10

On Windows 10 (not on previous versions of Windows and not on Edge in Windows 10) Internet Explorer 11 has a severe regression (MS issue 2337112) in its SVG engine. This bug is not related to yFiles, however since yFiles for HTML uses SVG as one of the main rendering approaches, many yFiles powered application can trigger this bug. Microsoft has indicated that they will not be fixing feature bugs like this in Internet Explorer anymore, so a workaround needs to be used instead. Since yFiles for HTML 1.3.0.4 a workaround flag has been included that should be enabled in affected programs.

Applications that use SVGs that contain elements that reference other elements in <defs> sections are affected: Whenever an element that references another element in a defs section is moved in the SVG DOM the internal reference to that element breaks. Resetting the reference after DOM modifications to the same value fixes the issue.

These are the default style implementations and visualizations in yFiles for HTML that can be affected by this issue:

• arrow heads for default edge styles
• resize handles
• gradient fills for default styles
• drop shadow renderings for default styles

To enable the workaround use the following code snippet. A similar snippet can be found in the "demo-util.js" (or "demo-framework.js" in yFiles for HTML 1.3) file in the package. By default yFiles itself does not activate these kind of browser bug workarounds. Since the workaround comes with a slight performance penalty, it should only be enabled on affected systems. Since feature detection does not work for this kind of bug, user agent sniffing needs to be used instead:

// Fix broken hrefs in IE11 on windows 10
if (internetExplorerVersion === 11 && windowsVersion === 10) {
  yfiles.workaroundIE2337112 = true;
}