Multilevel inheritance of JavaScript classes, yFiles class framework
The yFiles class framework does not support multilevel inheritance of JavaScript classes in combination with BaseClass. The class framework throws an error with a clear error message in this case, and there is a knowledge base article that describes the possible workarounds.
Content-Security-Policy (CSP)
Setting a secure Content-Security-Policy requires making an adjustment to ensure the proper functioning of yFiles.
By default, yFiles loads its CSS styles by inserting a <style> element into the DOM.
yFiles relies on these styles to function properly.
Additionally, yFiles uses the setAttribute() function
in several places to modify the style property of internally used HTML elements.
However, both the insertion of <style> elements and the modification of the
style attribute using the setAttribute() function are restricted if a
content security policy is applied, unless it is set as unsafe.
To exclude the styles loaded by yFiles from the content security policy, you can
configure a specific set of unsafe hashes.
After unsafe-hashes, list the hash codes of the yFiles stylesheets that are
logged to the browser’s developer console when using a secure content security policy.
For yFiles for HTML 2.6.0.2, the configuration looks like this:
Content-Security-Policy: style-src 'self' 'unsafe-hashes' 'sha256-7Pu3hinXdj8VFYmteOTmNXWMU+7rB6e//vfADReF/io='Graph panning and drag operations lag, Chrome
A bug in Chrome
results in lags during pan and drag operations when the mouse button is pressed.
As a workaround, the property cr570845 is set to 24 (fps) by default.
The property sets the rate at which dangling setTimeout operations
are flushed using requestAnimationFrame. Set the property to -1 to disable the workaround.
Poor SVG rendering performance, Firefox
A problem in Firefox’s SVG rendering engine causes poor SVG rendering performance. This can be prevented by enabling the workaround cr320635 which was originally added for a Chrome bug.
Missing visualizations when using SvgExport.encodeImagesBase64, Firefox
In Firefox, using SvgExport.encodeImagesBase64 with SVG images that do not have width and height properties
yields to empty data URIs, hence missing the visualization.
To workaround this Firefox behavior, make sure SVGs that are used in the diagram (e.g. with the
ImageNodeStyle) always have proper width and height attributes or enable SvgExport.inlineSvgImages.
Incorrect positioning of exported HtmlVisuals, Safari
The positioning of children of foreignObject elements is wrong in Safari/WebKit due to
this bug in Safari. The exported SVG is correct, though; just the
rendering is affected. Enabling rasterizeHtmlVisuals does not help because it will still
render the foreignObject elements with the same issues as part of the export.
Label text flickers or looks fragmented during zooming, Safari
Due to this bug in Safari, SVG text flickers or looks fragmented during zooming and animated size changes.
Broken Web Components 1.0 implementation, Safari 10 and newer
The Web Components 1.0 standard implementation in Safari 10 and newer breaks rendering of non-trivial SVGs due
to a spec bug. Until this is resolved, we
recommend not to use yFiles for HTML inside a native web component. Either don’t use web components, switch to
canvas rendering instead, or move the GraphComponent outside of the Web Component hierarchy.
WebGL2 Rendering is not supported in old browsers
WebGL2 rendering is supported in all modern browsers, with the exception of Safari before version 15. In Safari 10-14, it is available as an experimental feature and needs to be enabled in the developer menu Experimental Features. WebGl2 rendering is not available in neither Edge Legacy nor Internet Explorer.
WebGL2GroupNodeStyle and WebGL2BridgeEdgeStyle are not rendered on iPad 6
On iPad 6 (2018) with iOs 15.6, elements styled with WebGL2GroupNodeStyle or WebGL2BridgeEdgeStyle are invisible. While the implementation can switch to a reduced version of the shaders for older devices, this specific device appears to provide incorrect information and remains undetectable. The iPad 6 is the only device on which issue occurred.
WebGL2PolylineEdgeStyle cannot render smooth bends, Android
Polyline edges with smooth bends styled with WebGL2PolylineEdgeStyle are rendered
without smoothing when the Android device does not have enough mediump precision.
WebGL2 items are sometimes invisible on Safari 14
On Safari 14, items, such as handles or graph items are invisible when only a single type of items is being displayed at the same time. For example, if only handles or only nodes with WebGL2ShapeNodeStyle are being rendered, they may not appear on the screen. However, if two or more different item types are rendered simultaneously, the missing items will become visible again. This issue is not reproducible in Safari 15 and later versions.
Mouse events, All browsers
If a mouse button is pressed outside a yFiles component and then enters a component,
the button state reported by the various Mouse events does not include this button
unless the browser supports the property
MouseEvent.buttons.
For consistency, no MouseUp is fired in this case if the button is released inside a control.
In Chrome, if the mouse enters the GraphComponent while a mouse button is pressed, an unnecessary
pair of MouseLeave/MouseEnter events is fired. This does not interfere with default
yFiles behavior but might be considered in custom mouse handling code.
In Firefox, if the mouse enters the GraphComponent while a mouse button is pressed and something is
selected in the page, no events are reported at all. Once the button is released, a MouseEnter
event is fired and regular event dispatching continues.
Fast zooming and scrolling on precision touchpads, Firefox
Firefox fires many mousewheel events for two-finger scrolling on precision touchpads,
e.g. the ones of Microsoft Surface and Apple MacBook devices. Because of this, the GraphComponent
zooms and scrolls very fast on this gesture.
Zooming on precision touchpad not working, Internet Explorer 11 and Edge Legacy
EdgeHTML 16 and IE 11 do not fire events for the two finger gesture
on a precision touchpad, e.g. on a Microsoft Surface device.
Because of this, the GraphComponent cannot be zoomed with a two finger gesture.
This bug is fixed in EdgeHTML 17 that was released with Windows 10 version 1803.
With this update, the precision touchpad behaves like a touch input device, enabling pinch
zooming or two-finger panning on the GraphComponent.
However, it is not fixed in Internet Explorer 11 and presumably won’t be fixed in the future.
Disappearing <use> elements, Internet Explorer 11 on Windows 10
A bug in Internet Explorer 11
on Windows 10 results in disappearing <use> elements. As a workaround, set
the property ie2337112 to true. This reapplies the respective 'href'
on the element, which resolves the bug.
Broken SVG <marker> elements, Edge Legacy and Internet Explorer on Windows 7, 8, and 8.1
In EdgeHTML 16 (Windows 10 version 1709), SVG <marker> elements may crash the current tab. In IE on Windows before Windows 10, dynamically updating SVG <marker> elements doesn’t work. Therefore, the default demo styles that are used in the source code demos use <path> elements instead of <marker> elements for arrows in these browsers.
Consecutive whitespace characters in label text, Internet Explorer
Due to this shortcoming of Internet Explorer,
multiple consecutive whitespace characters in label text are displayed as a single space. As a
workaround, the class TextRenderSupport replaces each non-newline whitespace with the unicode
non-breaking space character \u00A0 if the property ie964525 is set
to true.
Note that this workaround corrects the visualisation of labels with DefaultLabelStyle since that
style uses TextRenderSupport.
Native HTML5 drag and drop not working, Internet Explorer
Internet Explorer has only partial support for native HTML5 drag and drop events. Because
setData/getData on the dataTransfer object only accepts "text" as valid
data type, the ItemDropInputMode cannot detect which item type is about to be dropped.
As a workaround, either use the startDrag methods of the respective item drop input modes or register
custom drop listeners on the GraphComponent with custom item creation code.
Array.isArray fails in some cases, GWT projects in Internet Explorer
Due to a bug in Internet Explorer,
Array.isArray can cause unexpected behavior in some cases in larger GWT projects.
To enable a workaround, set the ie7766782 variable to true.
Developer tools drastically degrade JavaScript performance, Internet Explorer
In Internet Explorer, JavaScript performance drastically degrades after starting the debugger or profiler in the developer tools. Neither stopping debugging, closing the developer tools, nor reloading the current tab brings back normal performance. Only a restart of the browser restores regular performance.
Exported HtmlVisuals will not render, Internet Explorer
Internet Explorer does not support the SVG foreignObject element, which is necessary to include HTML visuals
as part of an exported SVG image. This only affects the export, not the rendering in the CanvasComponent.