Shadow DOM Bug: SVGs don't display correctly

Troubleshooting

Summary

In Safari, shadow DOMs don't render SVGs properly that contain SVG `use` elements. yFiles for HTML uses this feature extensively and thus looks broken in Safari when used inside a shadow DOM.

This article was written for an older version. It is only online as a reference for customers using this old version. The information it contains is probably out of date.

The latest information can be found in the yFiles documentation

Description

According to the webkit team the SVG spec is not clear enough about how to handle SVG use elements inside shadow DOMs.

There is an open bug with the shadow DOM specification and the consent seems to be that the spec needs to be refined in order to properly support SVG inside shadow DOMs.

Until the webkit team resolves BUG 174977, using yFiles for HTML inside a shadow DOM cannot work properly in the affected versions of Safari (starting with version 10). The only workaround is to not use shadow DOM or don't use those features that rely on SVG use elements. Most notably these are handles, port, bend, and many arrowhead visualizations, but custom styles are also likely to be affected. Polymer version 2 is affected by this problem, so if yFiles is used inside a Polymer component, it may not be rendered properly. It seems that Polymer version 1 is not yet affected. The Chrome/Blink implementation of shadow DOM and webcomponents v1 does not currently suffer from this problem.

Categories this article belongs to:

yFiles for HTML > Other

Applies to:

yFiles for HTML: 1.0, 1.1, 1.2, 1.3, 1.4, 2.0, 2.1

Keywords:

Safari - SVG - bug - webkit - shadow dom - web components - invisible - 174977