Svg circle with small stroke-dasharray missing antialiasing

Question

If I use a very small stroke-dasharray on a circle, it produces strange "rectangle-like" shape in the middle of the circle. What causes this behavior and is there a way to solve it?

Chrome stroke-dasharray:0.6 and lower fails Firefox stroke-dasharray:2 and lower fails

<svg viewBox="0 0 100 100" style="width:800px;height:800px;">
  <circle cx="50" cy="50" r="50" fill="black" stroke="red" stroke-width="100" stroke-dasharray="0.6, 10000"></circle>
</svg>

<svg viewBox="0 0 100 100" style="width:800px;height:800px;">
  <circle cx="50" cy="50" r="50" fill="black" stroke="red" stroke-width="100" stroke-dasharray="0.7, 10000"></circle>
</svg>

<svg viewBox="0 0 100 100" style="width:800px;height:800px;">
  <circle cx="50" cy="50" r="50" fill="black" stroke="red" stroke-width="100" stroke-dasharray="2, 10000"></circle>
</svg>

<svg viewBox="0 0 100 100" style="width:800px;height:800px;">
  <circle cx="50" cy="50" r="50" fill="black" stroke="red" stroke-width="100" stroke-dasharray="3, 10000"></circle>
</svg>