Text SVG stroke-dasharray length different from Chrome to Safari

Question

I have the followint SVG Text that I want to animate. No issue on the animation, however the length of the dash-array differs from Chrome to Safari (not tested else where yet).

Note that the stroke-dasharray works at 87 on Chrome and at 837 on Safari. Why is it different?

#chrome{
   stroke-dasharray: 87;
   stroke-dashoffset: 87;
   transition: .5s;
}

#chrome:hover{
  stroke-dashoffset: 0;
}

#safari{
   stroke-dasharray: 837;
   stroke-dashoffset: 837;
   transition: .5s;
}

#safari:hover{
  stroke-dashoffset: 0;
}

Chrome: Hover below.
<svg width="500" viewBox="0 0 102 17">
    
    <text id="chrome" x="0" y="13" stroke-width=".2" stroke="red" fill="none">Web Design.</text>

</svg>
<br>
Safari: Hover below.
<svg width="500" viewBox="0 0 102 17">
    
    <text id="safari" x="0" y="13" stroke-width=".2" stroke="red" fill="none">Web Design.</text>

</svg>