CSS定位问题仅在野生动物园

Question

我在div loadingMessage上的svg上有文本，无论窗口打开的大小如何，它都希望出现在中间，它在Chrome，Firefox和IE中都可以很好地工作。 但是对于野生动物园，它位于右侧。 我想知道为什么以及如何解决这个问题。 以下是在Safari和其他浏览器上运行它的图片。

我的SVG代码是：

 var message = d3.select("#loadingMessage")
            .append("svg")
            .attr("id", "erase")
            .attr("width", 500)
            .attr("height", 100)
            .append("text")
            .text("Why this does not work on safari")
            .attr("x", 250)
            .attr("y", 55)
            .attr("fill", 'royalBlue')
            .attr("font-size", 20)
            .attr("font-weight", "bold")
            .attr("text-anchor", "middle")
            .attr("font-family", "Sans-serif");

我的css定位代码是：

#loadingMessage{
position: absolute;
top: 55%;
left: 50%;
transform: translate(-50%, -50%);}

谢谢。

Answer 1

Safari不支持未前缀的CSS转换 。 即使Mac版本使用过，Windows版本也不会使用，因为自2012年以来就没有进行过更新。在Windows上的Safari中进行测试基本上是在浪费时间，因为没有人使用Windows版本，并且没有您可以准确了解Mac Safari用户将看到的内容。

要解决此问题，请添加transform的前缀版本：

#loadingMessage{
    position: absolute;
    top: 55%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}