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

Question

I have texts on svg on a div loadingMessage that want it to be appear in middle no matter how large or small is the window opened, it works well in Chrome, Firefox, and IE. But for safari, it is off to right side. I was wondering why and how to solve this. Below are pictures of running it on safari and other browsers.

My code for the svg is:

 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");

and my code for css positioning is:

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

Thank you.

Answer 1

Safari does not support unprefixed CSS transforms . Even once the Mac version does, the Windows version still won't, because it hasn't been updated since 2012. Testing in Safari on Windows is basically a waste of time because no one uses the Windows version, and it doesn't give you an accurate idea of what Mac Safari users will see.

To fix the issue, add a prefixed version of transform :

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