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