document.elementFromPoint returning different elements for same input

I am using document.elementFromPoint to figure out what svg shape is at a certain point. I was experimenting with elementFromPoint on this image when I noticed that I was getting different outputs for the same input.Image of chrome devtools console where document.elementFromPoint is called with the arguments 0.25 and 50 in 2 different places, returning different svg elements

Here is exactly what I did for reproducibility.

  1. I cut and pasted the svg tag from the linked svg and inserted it into the body of an html file. The html file was set up using the single ! emmet shortcut in vscode. Nothing else was in the body. The only css was body{margin:0;}.
  2. In chrome I went around calling elementFromPoint. Mostly at .25,50 but sometimes just a little to the right or a little to the left. Sometimes calling with the same arguments over and over again to see if it would change.
  3. There was no scrolling done during this time. There wasn’t even an option as there was no scroll bar present.

My question is why does this happen? Is there a pattern to it? Is there a way to prevent it?
Thanks.