diff --git a/packages/joint-core/src/dia/LinkView.mjs b/packages/joint-core/src/dia/LinkView.mjs index f17b1f1a2..db98f4234 100644 --- a/packages/joint-core/src/dia/LinkView.mjs +++ b/packages/joint-core/src/dia/LinkView.mjs @@ -5,7 +5,7 @@ import { addClassNamePrefix, merge, assign, isObject, isFunction, clone, isPerce import { Point, Line, Path, normalizeAngle, Rect, Polyline } from '../g/index.mjs'; import * as routers from '../routers/index.mjs'; import * as connectors from '../connectors/index.mjs'; - +import { env } from '../env/index.mjs'; const Flags = { TOOLS: CellView.Flags.TOOLS, @@ -99,6 +99,11 @@ export const LinkView = CellView.extend({ this.updateHighlighters(true); this.updateTools(opt); flags = this.removeFlag(flags, [Flags.RENDER, Flags.UPDATE, Flags.LABELS, Flags.TOOLS, Flags.CONNECTOR]); + + if (env.test('isSafari')) { + this.__fixSafariBug268376(); + } + return flags; } @@ -151,6 +156,19 @@ export const LinkView = CellView.extend({ return flags; }, + __fixSafariBug268376: function() { + // Safari has a bug where any change after the first render is not reflected in the DOM. + // https://bugs.webkit.org/show_bug.cgi?id=268376 + const { el } = this; + const childNodes = Array.from(el.childNodes); + const fragment = document.createDocumentFragment(); + for (let i = 0, n = childNodes.length; i < n; i++) { + el.removeChild(childNodes[i]); + fragment.appendChild(childNodes[i]); + } + el.appendChild(fragment); + }, + requestConnectionUpdate: function(opt) { this.requestUpdate(this.getFlag(Flags.UPDATE), opt); }, diff --git a/packages/joint-core/src/env/index.mjs b/packages/joint-core/src/env/index.mjs index 92224329a..8051c6232 100644 --- a/packages/joint-core/src/env/index.mjs +++ b/packages/joint-core/src/env/index.mjs @@ -7,6 +7,11 @@ export const env = { svgforeignobject: function() { return !!document.createElementNS && /SVGForeignObject/.test(({}).toString.call(document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject'))); + }, + + // works for iOS browsers too + isSafari: function() { + return /Safari/.test(navigator.userAgent) && /Apple Computer/.test(navigator.vendor); } },