Multilevel inheritance of JavaScript classes, yFiles class framework
The yFiles class framework does not support multilevel class inheritance with JavaScript classes if one of the subclasses uses BaseClass.
The reason for this is as follows: BaseClass constructs an artificial anonymous class that calls its super constructor.
This is not possible with code that is compatible with ECMAScript 5, since the browser will throw an exception when class A is called as a regular function without new.
When using the development mode of the yFiles library, it will throw a meaningful error:
TypeInfoError: Class was not initialized. yFiles does not support multilevel inheritance of JavaScript classes together with BaseClass and interfaces.
Otherwise, the browser throws an exception: TypeError: Class constructor A cannot be invoked without 'new'.
Content Security Policy (CSP)
Setting a secure Content-Security-Policy requires an adjustment to ensure yFiles functions properly.
By default, yFiles loads its CSS styles by inserting a <style> element into the DOM.
yFiles relies on these styles to function properly.
However, the insertion of <style> elements is restricted if a content security policy is applied.
To allow the <style> element created by yFiles, add the SHA-265 hash value of the style content
to your policy with the unsafe-hashes setting. Note that despite its name, this setting only indicates
that you trust the styles that are included in yFiles.
It’s not inherently unsafe, especially when used for styles rather than scripts.
The configuration might look like this:
Content-Security-Policy: style-src 'self' 'unsafe-hashes' 'sha256-yW7oemeAW9QjzU48j4BehjWFyOQbder0AF2Ce1Bdgrc='Alternatively, you can explicitly load the yfiles.css stylesheet. In this case, no <style> tag is added to the DOM
during the instantiation of a GraphComponent.
The stylesheet is included in the npm module, so you can either retrieve it from the node_modules directory
or extract it from the library archive file.
Incorrect event locations when using HtmlVisuals and CSS transforms
If a CSS transform is applied to the element of the GraphComponent and HtmlVisuals are used, the location of pointer events on these visuals is not considered correctly. As a result, user interaction may behave incorrectly.
The Popover API, Firefox 115
The Popover API is available in browser since 2023, but in Firefox only since version 125 (released in April 2024). In older browsers, placement in the top layer is not available and popovers are always placed in the overlayPanel. Besides from this, all features of the PopoverManager and the related classes ToolTipInputMode and ContextMenuInputMode should work without problems.
The Intl.Segmenter API, Firefox 115
The Intl.Segmenter API has been available in most browsers for quite some time, but in Firefox only since version 125 (released in April 2024). Without the Intl.Segmenter API, yFiles uses a simple segmentation method based on Latin characters. We recommend using a proper Polyfill if you’re targeting older Firefox versions.
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.
Missing visualizations when using SvgExport.encodeImagesBase64, Firefox
In Firefox, using SvgExport.encodeImagesBase64 with SVG images that do not have width and height properties
yields empty data URIs, hence missing the visualization.
To work around 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.
Unexpected mousemove events in the Meta Quest browser
During user interaction, the browser on the Meta Quest VR headset sends unusual pointer events of type mouse alongside regular pointer events.
These additional events confuse the processing of input events by yFiles, and the input processing works as expected only with the other pointer events.
Therefore, we have added code to the demos that filters out such events on this browser.
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.
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.
Axis-parallel edges with gradient strokes are not visible
When an edge uses a radial or linear gradient as the fill for the PolylineEdgeStyle's stroke, the edge will become invisible when it is perfectly horizontal or vertical. This happens because SVG ignores stroke width for bounding box calculations. A possible workaround is to use a style that slightly modifies the edge path for such edges. When only drawing a limited amount of edges it is also possible to subdivide the edge-path into smaller segments. These segments can then be colored according to an interpolated value along the gradient. When the subdivision is chosen small enough this then gives the appearance of a gradient edge, which perfectly follows the path. Such an approach is shown in the Biofabrics demo.
WebGL2 limitations
WebGL-based features rely on the browser’s WebGL support and may exhibit rendering artifacts or unexpected behavior, particularly on older devices or browsers. Refer to the WebGL Limitations section for detailed information and a list of known rendering issues.