I have an svg that is using some values with pixels (cx, cy, r). When I open it in Safari and I do cmd + "+" or cmd + "-" everything messes up. I don't know how to fix this. This problem doesn't happen with Chrome.
The computed values for those styles change when doing one of those 2 actions. I don't want them to change.
body {
background-color: black;
}
.container {
width: 28%;
height: 28%;
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
.circle {
transform-origin: center center;
}
.circle-1 {
transform: rotateZ(0deg) translateZ(0);
stroke-dasharray: 220;
stroke-dashoffset: 20;
}
.circle-2 {
transform: rotateZ(540deg) translateZ(0);
stroke-dasharray: 176;
stroke-dashoffset: 20;
}
.circle-3 {
transform: rotateZ(72deg) translateZ(0);
stroke-dasharray: 132;
stroke-dashoffset: 30;
}<!-- To reproduce, open in Safari e.g. Safari 10.1 and click command + "+". The positioning for the circles changes. This doesn't happen in Chrome -->
<svg class="container" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 73 73">
<circle class="circle circle-1" cx="36.5" cy="36.5" r="35" fill="none" stroke="#fff" stroke-miterlimit="10" stroke-width="2"></circle>
<circle class="circle circle-2" cx="36.5" cy="36.5" r="28" fill="none" stroke="#fff" stroke-miterlimit="10" stroke-width="2"></circle>
<circle class="circle circle-3" cx="36.5" cy="36.5" r="21" fill="none" stroke="#fff" stroke-miterlimit="10" stroke-width="2"></circle>
</svg>Here is a codepen: https://codepen.io/Ostos/pen/WZbGRW