Javascript ForeignObject在Safari浏览器中不工作

我正在使用d3.js进行简单的数据可视化。它可以在Chrome和Firefox中使用，但不能在Safari中使用。 ForeignObject在Safari Mac浏览器上显示异常行为。文本向左移动（附图片）。这个问题与两个DIV的定位有关。我删除了#innerDiv上的位置：绝对和父div上的位置：相对。这解决了问题。但是，我无法将文本垂直居中（这是上述内容的目的）

在IOS Safari（移动版）上，它甚至不显示任何内容（附图片）

可视化是关于什么的？
它展示了科学家的生活事件。当您将鼠标悬停在网格的彩色部分上时，它会在右侧框中显示相应的信息。
下面是显示foreignObject的代码部分

      /* MAKE COMPLETE MODAL BOX HERE */
      var modalBox = d3.select("#mainSVG")
                     .append("g")
                     .attr("id", "modalBOXgroup")
                     .append("rect")
                     .attr("id", "modalBOX")
                     .attr("x", "600")
                     .attr("y", "45")
                     .attr("rx", "20")
                     .attr("rx", "20")
                     .attr("width", "580")
                     .attr("height", getSVGheight() - 60)
                     .style("fill", singleDayEvents[0].color)
                     .style("stroke", "white")
                     .style("stroke-width", "5px");

      var modalTitle = d3.select("#modalBOXgroup")
                               .append("foreignObject")
                               .attr("x", "620")
                               .attr("y", "70")
                               .attr("width", "540")
                               .attr("height", getSVGheight() - 110)
                               .append("xhtml:div")
                               .style("height", "100%")
                               .style("color", "white")
                               .style("font-family", "sans-serif")
                               .style("position", "relative")
                               .append("xhtml:div")
                               .attr("id", "innerDiv")
                               .style("position", "absolute")
                               .style("top", "50%")
                               .style("width", "100%")
                               .style("transform", "translateY(-50%)")
                               .style("overflow", "auto")
                               .append("h3")
                               .attr("id", "modalTitle")
                               .style("color", "white")
                               .style("text-align", "center")
                               .style("text-decoration", "underline")
                               .text(singleDayEvents[0].title);

      var modalDescription = d3.select("#modalBOXgroup foreignObject #innerDiv")
                               .append("p")
                               .attr("id", "modalDescription")
                               .style("font-size", "14px")
                               .style("text-align", "justify")
                               .style("line-height", "30px")
                               .text(singleDayEvents[0].desc);

      /* MAKE COMPLETE MODAL BOX HERE */

您可以访问此链接进行查看：

PS我尝试将名称空间（带有xmlns属性）添加到foreignObject中的两个div中。但它不起作用

图片：

---

@RobertLongson奇怪的行为是文本向左移动。我已经编辑了这个问题以包含图片。