Known Issues of the yFiles Library

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, 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 3.0, 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.

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 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.

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.

WebGLGroupNodeStyle and WebGLBridgeEdgeStyle are not rendered on iPad 6

On iPad 6 (2018) with iOs 15.6, elements styled with WebGLGroupNodeStyle or WebGLBridgeEdgeStyle 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.

WebGLPolylineEdgeStyle cannot render smooth bends, Android

Polyline edges with smooth bends styled with WebGLPolylineEdgeStyle 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 WebGLShapeNodeStyle 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.

Label text may occasionally fail to render when using WebGL2 rendering.

When rendering a large number of labels simultaneously with WebGL2, label text may not display correctly. This issue arises from GPU texture size limitations, which can prevent the creation of sufficiently large texture atlases required for high-quality text rendering. It primarily affects devices with constrained GPU resources, such as certain Android devices, where these limitations are more pronounced. To address this, implementing Level of Detail (LOD) rendering based on zoom levels can help reduce the number of labels rendered at lower zoom levels, improving performance and ensuring labels are displayed properly.

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.