JointJS在Safari测试环境下带滚动的HTML元素渲染异常问题求助

大家好，我最近在Vue项目里用JointJS做流程示意图，碰到了一个特别棘手的兼容性问题，折腾好久没找到解决办法，想请教下各位大佬！

情况是这样的：Chrome浏览器不管本地开发还是测试环境都完全正常，Safari本地运行也没问题，但部署到测试环境后，两个包含列表的元素（我叫它们“Input”和“Output”）样式直接崩了。这两个元素里的列表项如果内容过多，我需要让它能垂直滚动，所以给外层div加了overflow-y: auto，结果在Safari测试环境里，这些列表项居然跑到画布左上角去了，滚动功能完全失效。

我之前看到Safari对overflow-y: auto有兼容问题，特意改成了overflow-y: scroll，但还是没用。更奇怪的是，只要去掉overflow-y: scroll这行代码，或者删掉几个列表项让内容不溢出，元素就又正常显示了——可滚动功能是必须的，不能这么妥协。

下面是生成这两个元素的核心代码，麻烦帮忙看看有没有什么问题：

首先是生成HTML内容的函数：

const generateMassDataHtml = (title, massData = null, totalMass = null) => `
  <div style="height: ${unitOpHeight}px; padding: 10px 16px; width: 100%; overflow-y: ${isSafari ? 'scroll' : 'auto'};">
    <p style="text-align: center; ${textLabelStyle} font-weight: 600; margin-bottom: 4px;">${title}</p>
    <hr style="border: none; border-top: 1px solid #e0e0e0; margin: 0 0 10px 0;">
    ${ 
      this.hasResults && massData && totalMass ? 
        Object.entries(massData).map(([name, mass]) => `
          <div style="display: flex; flex-direction: column; align-items: center; justify-content: center; margin-bottom: 8px;">
            <p style="text-align: center; ${textLabelStyle} font-weight: 500; margin-bottom: 0;">${name}</p>
            ${ 
              this.isFree && mass.component ? 
                `<span style="${getHiddenValueBlockStyle()}"></span>` : 
                `<p style="text-align: center; ${textValueStyle} margin-bottom: 0;">${mass.value.toLocaleString('en-US', { maximumFractionDigits: 0 })} kg</p>` 
            }
          </div>
        `).join('') + 
        `
          <p style="text-align: center; ${textLabelStyle} font-weight: 500; margin-bottom: 0;">Total Mass:</p>
          <p style="text-align: center; ${textValueStyle}; margin-bottom: 0;">${totalMass.toLocaleString('en-US', { maximumFractionDigits: 0 })} kg</p>
        ` : 
        this.hasConfiguration ? 
          `<p style="text-align: center; ${textLabelStyle} margin-top: 20px;">No results can be calculated, please reconfigure the process parameters</p>` : 
          `<p style="text-align: center; ${textLabelStyle} margin-top: 20px;">No process parameters configured</p>`
    }
  </div>
`

然后是创建JointJS元素的代码：

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)

我实在搞不懂为什么只有Safari测试环境会出这个问题，本地Safari明明好好的。有没有大佬遇到过类似的情况，或者能给点排查方向？万分感谢！

内容来源于stack exchange