CODEWITHSUNDEEP
htmlcssd3.jssvgcross-browser
Bighuyou
Bighuyou

Reputation: 83

css positioning issue only in safari

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.enter image description here enter image description here

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.

Upvotes: 0

Views: 7199

Answers (1)

Josiah Keller
Josiah Keller

Reputation: 3675

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%);
}

Upvotes: 2

Related Questions