Is this a SVG rendering bug in Chrome (but not Firefox)?

Question

I have an SVG that must be positioned absolutely and doesn't have a width/height because it's unknown at runtime. However, it does have overflow: visible set to allow content to be rendered at any coordinate.

When the SVG has an element like a <path> or <circle> that is very far along the y-axis (e.g. 4000 pixels), the SVG seems to be rendered offset in Chrome. In Firefox, the SVG renders correctly at the right coordinates.

What's even more strange is that if I set cursor on the element, it appears at the correct location, not the rendered location.

Here's an example:

const canvas = document.getElementById('canvas');
const canvasZoom = document.getElementById('canvasZoom');

canvasZoom.addEventListener('change', () => {
  const zoom = canvasZoom.value;
  canvas.style.zoom = zoom;
});

#canvas {
  position: relative;
  width: 4200px;
  height: 4200px;
}

#line {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  overflow: visible;
  background: rgba(255, 0, 0, 0.2);
}

#line path {
  stroke: black;
  stroke-width: 10px;
  cursor: move;
}

#box {
  position: absolute;
  top: 4000px;
  left: 300px;
  width: 100px;
  height: 100px;
  border: 1px solid #00ff00;
}

<input type="range" id="canvasZoom" min="0" max="1" value="100" step="0.05">
<div id="canvas">
  <div id="box"></div>
  <svg xmlns="http://www.w3.org/2000/svg" id="line">
    <path d="M 350 4000 L 350 4100" fill="red" />
    <circle cx="350" cy="4050" r="10" fill="blue" />
  </svg>
</div>

Firefox (expected):

Chrome:

If the SVG elements have coordinates near the top, it renders correctly.

I've tried setting things like width: 100%; height: 100% but it doesn't fix it. For example, zooming in and out causes the rendering to be incorrect again.

If I set the width and height of the SVG equal to the parent element, it renders correctly. However, this is not possible or desired in the true implementation.