html - svg issue with safari when zooming in -
i have svg using values pixels (cx, cy, r). when open in safari , cmd + "+" or cmd + "-" messes up. don't know how fix this. problem doesn't happen chrome.
the computed values styles change when doing 1 of 2 actions. don't want them 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; }
<!-- reproduce, open in safari e.g. safari 10.1 , click command + "+". positioning circles changes. 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 codepen: https://codepen.io/ostos/pen/wzbgrw
Comments
Post a Comment