Blazor Server - Mouse Offset works with JS Interop but not using MouseEventArgs.OffsetX/OffsetY

I created a simple Blazor server app to explore the technology and decide if I wanted to use it for a particular use case that involves having the user being able to draw on the web page.

I needed to know the position of where the user clicks and or drags so I looked up a few resources on how to calculate the mouse offset x and y using java script, and it functions exactly as I had expected.

I recently found out that in .NET 5 "OffsetX" and "OffsetY" were added to the API, so I removed the Java script call I was making in favor of this, and now my once working code no longer works. The issue is that the offset values that gets returned by the MouseEventArgs object are not always consistent, and can cause the line being drawn to snap to a seemingly random coordinate.

I believe that all I did was replace a JS call with a .NET API, I am at a loss of why this is happening.

Working code:

@page "/"
@using Microsoft.JSInterop
@inject IJSRuntime js

<svg @ref="svg" width="1920" height="1080" style="border:solid; border-color: black; border-width:3px"
     @onmousedown="MouseDownHandler"
     @onmouseup="MouseUpHandler"
     @onmousemove="MouseMoveHandler">
    @foreach (Line line in LineList)
    {
        <line @key="@line"
              x1="@line.Start.X"
              y1="@line.Start.Y"
              x2="@line.End.X"
              y2="@line.End.Y"
              stroke="black"
              stroke-width="2" />
    }
</svg>

@code {
    private ElementReference svg;
    public class Coordinate
    {
        public double X { get; set; }
        public double Y { get; set; }
    }
    public class Line
    {
        public Coordinate Start = new();
        public Coordinate End = new();
    }

    private Coordinate Offset = new();
    private List<Line> LineList = new();
    private Line line;
    private Coordinate lastClickPosition;
    private bool isMouseDown = false;

    private async Task MouseDownHandler(MouseEventArgs args)
    {
        Offset = await js.InvokeAsync<Coordinate>("eval", $"let e = document.querySelector('[_bl_{svg.Id}=\"\"]'); e = e.getBoundingClientRect(); e = {{ 'X': e.x, 'Y': e.y }}; e");
        Coordinate mousePosition = new()
        {
            X = args.ClientX - Offset.X,
            Y = args.ClientY - Offset.Y
        };
        line = new Line();
        LineList.Add(line);
        line.Start = mousePosition;
        line.End = mousePosition;
        isMouseDown = true;
    }
    private void MouseUpHandler(MouseEventArgs args)
    {
        isMouseDown = false;
    }
    private async Task MouseMoveHandler(MouseEventArgs args)
    {
        if (isMouseDown)
        {
            Offset = await js.InvokeAsync<Coordinate>("eval", $"let e = document.querySelector('[_bl_{svg.Id}=\"\"]'); e = e.getBoundingClientRect(); e = {{ 'X': e.x, 'Y': e.y }}; e"); Coordinate mousePosition = new()
            {
                X = args.ClientX - Offset.X,
                Y = args.ClientY - Offset.Y
            };
            line.End = mousePosition;
        }
    }

Non working code:

@page "/"
@using Microsoft.JSInterop
@inject IJSRuntime js

<svg @ref="svg" width="1920" height="1080" style="border:solid; border-color: black; border-width:3px"
     @onmousedown="MouseDownHandler"
     @onmouseup="MouseUpHandler"
     @onmousemove="MouseMoveHandler">
    @foreach (Line line in LineList)
    {
        <line @key="@line"
              x1="@line.Start.X"
              y1="@line.Start.Y"
              x2="@line.End.X"
              y2="@line.End.Y"
              stroke="black"
              stroke-width="2" />
    }
</svg>

@code {
    private ElementReference svg;
    public class Coordinate
    {
        public double X { get; set; }
        public double Y { get; set; }
    }
    public class Line
    {
        public Coordinate Start = new();
        public Coordinate End = new();
    }

    private Coordinate Offset = new();
    private List<Line> LineList = new();
    private Line line;
    private Coordinate lastClickPosition;
    private bool isMouseDown = false;

    private void MouseDownHandler(MouseEventArgs args)
    {
        Coordinate mousePosition = new()
        {
            X = args.OffsetX,
            Y = args.OffsetY
        };
        line = new Line();
        LineList.Add(line);
        line.Start = mousePosition;
        line.End = mousePosition;
        isMouseDown = true;
    }
    private void MouseUpHandler(MouseEventArgs args)
    {
        isMouseDown = false;
    }
    private void MouseMoveHandler(MouseEventArgs args)
    {
        if (isMouseDown)
        {
            Coordinate mousePosition = new()
            {
                X = args.OffsetX,
                Y = args.OffsetY
            };
            line.End = mousePosition;
        }
    }
}