css 仅在 safari 中存在定位问题

Question

我在 div loadingMessage 上的 svg 上有文本，希望它显示在中间，无论 window 打开多大或多小，它在 Chrome 中运行良好，火狐和 IE。但对于 safari，它位于右侧。我想知道为什么以及如何解决这个问题。下面是运行它在 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 does not support unprefixed CSS transforms。即使 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%);
}

css 仅在 safari 中存在定位问题

css positioning issue only in safari

html

css

svg

cross-browser

d3.js