COBNITJS не рендеринг HTML -элементов с прокруткой на сафари ⇐ Javascript

[Anonymous]

В моем приложении Vue я использую совместные д.В. для создания диаграммы процесса. < /p>
Все работает нормально для хрома - как локально, так и в среде тестирования.
на сафари, он также работает локально, но после развертывания в среде тестирования разбивается. Список элементов внутри. В случае, если слишком много элементов, я хочу иметь возможность прокручивать - поэтому я добавил переполнение y: Auto; в стили div. Вместо этого эти элементы отображаются в верхнем левом углу холста по какой-то причине. для переполнения: прокрутка; - но это не помогает. Похоже, по какой -то причине прокрутка не работает - просто в среде Safari & Testing ... любая идея, как его решить? /> ... или, сохраняя его, но удаление некоторого элемента из списка, поэтому он предотвращает переполнение:
< /p>
К сожалению, Scollling здесь необходимо. Создание этих 2 элементов: < /p>
const generateMassDataHtml = (title, massData = null, totalMass = null) => `

${title}

${
this.hasResults && massData && totalMass
? Object.entries(massData).map(([name, mass]) => `

${name}
${
this.isFree && mass.component
? ``
: `
${mass.value.toLocaleString('en-US', { maximumFractionDigits: 0 })} kg
`
}

`).join('') + `
Total Mass:
${totalMass.toLocaleString('en-US', { maximumFractionDigits: 0 })} kg
`
: this.hasConfiguration
? `
No results can be calculated, please reconfigure the process parameters
`
: `
No process parameters configured
`
}

`
< /code>
....
const input = new joint.shapes.standard.Rectangle()
input.resize(unitOpWidth, unitOpHeight)
const inputX = xStart + (stepWidth * (elementsCount % unitsPerRow))
const inputY = yStart + (Math.floor(elementsCount / unitsPerRow) * (unitOpHeight + yGap))
input.position(inputX, inputY)
elementsCount++
input.markup = [
{ tagName: 'rect', selector: 'body' },
{
tagName: 'foreignObject',
selector: 'fo',
attributes: { width: unitOpWidth, height: unitOpHeight },
children: [
{
namespaceURI: 'http://www.w3.org/1999/xhtml',
tagName: 'div',
selector: 'htmlContent',
attributes: { style: unitOpCardStyle }
}
]
}
]
const inputHtml = generateMassDataHtml('DSP Input', this.hasResults ? this.massData.input : null, this.hasResults ? this.results.input.mass : null)
input.attr({
body: { fill: '#fff', rx: 16, ry: 16, stroke: '#e0e0e0' },
fo: { width: unitOpWidth, height: unitOpHeight },
htmlContent: { html: inputHtml }
})
input.addTo(this.graph)


Подробнее здесь: https://stackoverflow.com/questions/797 ... -on-safari