Rendering issues in Safari 11 or other browsers on iOS 11

A regression in Safari 11 or other WebKit-based browsers on iOS 11 breaks references to objects that are stored as custom data attribute on the elements. For more information see this WebKit bug report: https://bugs.webkit.org/show_bug.cgi?id=175023

yFiles for HTML uses a mechanism to efficiently update the transformable of an SVG element through a stored object. When those references are not valid anymore, updating the transformable has no effect which may appear as the following rendering issues:

• Missing graph elements
• Viewport changes seem broken
• Centering of the graph does not work
• Selection/Highlight indicator are not zoomed properly
• etc.

Workaround

To resolve this problem, please enable the following workaround

yfiles.workaroundCR320635 = true;

The workaround basically disables the update mechanism which is why you should enable this workaround only in the affected browsers, which is Safari 11 on both, iOS and Mac OS X, or any other WebKit-based browser on iOS 11.

For example, browser sniffing may look like this

  /**
   * Returns version of Safari.
   * @return {number} Version of Safari or -1 if browser is not Safari.
   */
  function detectSafariVersion() {
    const ua = window.navigator.userAgent;
    const isSafari = ua.indexOf('Safari') !== -1 && ua.indexOf('Chrome') === -1;
    if (isSafari) {
      const safariVersionMatch = ua.match(new RegExp('Version\\/(\\d*\\.\\d*)', ''));
      if (safariVersionMatch && safariVersionMatch.length > 1) {
        return parseInt(safariVersionMatch[1]);
      }
    }
    return -1;
  }

  /**
   * Returns true for browser running on iOS11 (these are all actually WebKit Safari browsers).
   * @return {boolean}
   */
  function detectIOS11() {
    if (detectSafariVersion() === 11) {
      return true;
    }
    const ua = window.navigator.userAgent;
    return !!(/OS\s+11_.*(CriOS|FxiOS)/.exec(ua));
  }

  // Workaround for transformable caching regression in Safari 11 or other WebKit browser on iOS 11
  if (detectIOS11()) {
    yfiles.workaroundCR320635 = true;
  }