Text overflow in safari when zoomed in

(1) By briano on 2024-07-24 11:26:54 [source]

left: safari 100% vs ~300%
right: chrome 100% vs ~300%

html generated by: echo box "hello" fit |pikchr -

<!DOCTYPE html>
<html lang="en-US">
<head>
<title>PIKCHR Test</title>
<style>
  .hidden {
     position: absolute !important;
     opacity: 0 !important;
     pointer-events: none !important;
     display: none !important;
  }
</style>
<script>
  function toggleHidden(id){
    for(var c of document.getElementById(id).children){
      c.classList.toggle('hidden');
    }
  }
</script>
<meta charset="utf-8">
</head>
<body>
<h1>File -</h1>
<div id="svg-1" onclick="toggleHidden('svg-1')">
<div style='border:3px solid lightgray;max-width:57px;'>
<svg xmlns='http://www.w3.org/2000/svg' class="pikchr" viewBox="0 0 57.1968 34.56" />
<path d="M2.16,32.4L55.0368,32.4L55.0368,2.16L2.16,2.16Z"  style="fill:none;stroke-width:2.16;stroke:rgb(0,0,0);" />
<text x="28.5984" y="17.28" text-anchor="middle" fill="rgb(0,0,0)" dominant-baseline="central">hello</text>
</svg>
</div>
<pre class='hidden'>box "hello" fit
</pre>
</div>
</body></html>

adding style="font-size: 100%" to the svg tag seems to fix the issue