Display issues in visualization in Safari

[jpmckinney]

Expected

Chrome

Actual

Safari Version 14.0 (15610.1.28.1.9, 15610) on macOS Catalina 10.15.7 (19H2)

Sample input

From BODS documentation:

[
  {
    "statementID": "1dc0e987-5c57-4a1c-b3ad-61353b66a9b7",
    "statementType": "entityStatement",
    "isComponent": false,
    "statementDate": "2017-11-18",
    "entityType": "registeredEntity",
    "name": "CHRINON LTD",
    "foundingDate": "2010-11-18",
    "identifiers": [
      {
        "scheme": "GB-COH",
        "id": "07444723"
      }
    ],
    "addresses": [
      {
        "type": "registered",
        "address": "Aston House, Cornwall Avenue, London, N3 1LF",
        "country": "GB",
        "postCode": "N3 1LF"
      }
    ],
    "incorporatedInJurisdiction": {
      "code": "GB"
    },
    "publicationDetails": {
      "publicationDate": "2018-11-18",
      "bodsVersion": "0.2",
      "publisher": {
        "name": "CHRINON LTD"
      }
    }
  },
  {
    "statementID": "26e786f0-54c5-497d-a52d-b83439ce3dad",
    "statementType": "entityStatement",
    "isComponent": false,
    "statementDate": "2018-01-05",
    "entityType": "arrangement",
    "name": "Joint shareholding",
    "publicationDetails": {
      "publicationDate": "2018-11-18",
      "bodsVersion": "0.2",
      "publisher": {
        "name": "CHRINON LTD"
      }
    }
  },
  {
    "statementID": "676ce2ec-e244-409e-85f9-9823e88bc099",
    "statementType": "ownershipOrControlStatement",
    "isComponent": false,
    "statementDate": "2018-01-05",
    "subject": {
      "describedByEntityStatement": "1dc0e987-5c57-4a1c-b3ad-61353b66a9b7"
    },
    "interestedParty": {
      "describedByEntityStatement": "26e786f0-54c5-497d-a52d-b83439ce3dad"
    },
    "interests": [
      {
        "type": "shareholding",
        "interestLevel": "direct",
        "beneficialOwnershipOrControl": false,
        "startDate": "2018-01-01",
        "share": {
          "exact": 100
        }
      }
    ],
    "publicationDetails": {
      "publicationDate": "2018-11-18",
      "bodsVersion": "0.2",
      "publisher": {
        "name": "CHRINON LTD"
      }
    }
  },
  {
    "statementID": "17bfeb0d-4a63-41d3-814d-b8a54c81a1f",
    "statementType": "personStatement",
    "isComponent": false,
    "personType": "knownPerson",
    "statementDate": "2018-01-05",
    "names": [
      {
        "fullName": "Natalie Coleman"
      }
    ],
    "publicationDetails": {
      "publicationDate": "2018-11-18",
      "bodsVersion": "0.2",
      "publisher": {
        "name": "CHRINON LTD"
      }
    }
  },
  {
    "statementID": "d1eb52de-ff02-4690-8359-f4bbf9c128b1",
    "statementType": "personStatement",
    "isComponent": false,
    "personType": "knownPerson",
    "statementDate": "2018-01-05",
    "names": [
      {
        "fullName": "Roberto López"
      }
    ],
    "publicationDetails": {
      "publicationDate": "2018-11-18",
      "bodsVersion": "0.2",
      "publisher": {
        "name": "CHRINON LTD"
      }
    }
  },
  {
    "statementID": "c222fe05-2bf3-4cc0-b126-f665109d7211",
    "statementType": "ownershipOrControlStatement",
    "isComponent": false,
    "statementDate": "2018-01-05",
    "subject": {
      "describedByEntityStatement": "26e786f0-54c5-497d-a52d-b83439ce3dad"
    },
    "interestedParty": {
      "describedByPersonStatement": "17bfeb0d-4a63-41d3-814d-b8a54c81a1f"
    },
    "interests": [
      {
        "type": "shareholding",
        "interestLevel": "direct",
        "beneficialOwnershipOrControl": true,
        "startDate": "2018-01-01",
        "share": {
          "exact": 50
        }
      }
    ],
    "publicationDetails": {
      "publicationDate": "2018-11-18",
      "bodsVersion": "0.2",
      "publisher": {
        "name": "CHRINON LTD"
      }
    }
  },
  {
    "statementID": "c222fe05-2bf3-4cc0-b126-f665109d7211",
    "statementType": "ownershipOrControlStatement",
    "isComponent": false,
    "statementDate": "2018-01-05",
    "subject": {
      "describedByEntityStatement": "26e786f0-54c5-497d-a52d-b83439ce3dad"
    },
    "interestedParty": {
      "describedByPersonStatement": "d1eb52de-ff02-4690-8359-f4bbf9c128b1"
    },
    "interests": [
      {
        "type": "shareholding",
        "interestLevel": "direct",
        "beneficialOwnershipOrControl": true,
        "startDate": "2018-01-01",
        "share": {
          "exact": 50
        }
      }
    ],
    "publicationDetails": {
      "publicationDate": "2018-11-18",
      "bodsVersion": "0.2",
      "publisher": {
        "name": "CHRINON LTD"
      }
    }
  }
]

[stevenday]

Thanks @jpmckinney - I took a little look at fixing this today and it seems it's the result of a longstanding bug with foreignobject: https://bugs.webkit.org/show_bug.cgi?id=23113 which we use to render HTML labels inside the larger SVG diagram.

The solution seems to be a combination of extra styles and particularly maintaining a transform on the root div inside to match the scale and position of the main SVG. There's a polyfill for this: https://github.com/marp-team/marpit-svg-polyfill but I couldn't make it work with a brief effort. Copying the techniques does seem to start to fix the issues though, so it seems worthwhile exploring a bit more.

This should factor into #25, as a 'pure' SVG diagram wouldn't have this issue.

[kd-ods]

@codemacabre - given that #25 means that the diagrams are now fully SVG, could you please test the sample input in Safari and see if the issue is resolved?