Inconsistent MouseEventArgs OffestX and OffestY in Blazor

[Phexyaa]

Describe the bug

When using MouseEventArgs.OffsetX and.OffsetY as endpoint coordinates when drawing a line inside of a svg element, the rendered line appears to "snap" to a seemingly random position. This does not happen when I account for the offset on my own.
Problem occurs specifically when moving the mouse towards the start position of the line element that is created on left button mouse click..

To Reproduce

I made a repo to demonstrate, and the only relevant file (as in modified from template) is Index.razor.
https://github.com/Phexyaa/BlazorMouseEventOffsetDemo

Exceptions (if any)

Further technical details

• ASP.NET Core version
  5

• Include the output of dotnet --info
  .NET SDK (reflecting any global.json):
  Version: 5.0.100
  Commit: 5044b93829

Runtime Environment:
OS Name: Windows
OS Version: 10.0.19041
OS Platform: Windows
RID: win10-x64
Base Path: C:\Program Files\dotnet\sdk\5.0.100\

Host (useful for support):
Version: 5.0.0
Commit: cf258a14b7

.NET SDKs installed:
2.1.202 [C:\Program Files\dotnet\sdk]
2.1.604 [C:\Program Files\dotnet\sdk]
2.1.700 [C:\Program Files\dotnet\sdk]
2.2.102 [C:\Program Files\dotnet\sdk]
2.2.204 [C:\Program Files\dotnet\sdk]
2.2.300 [C:\Program Files\dotnet\sdk]
3.1.403 [C:\Program Files\dotnet\sdk]
5.0.100 [C:\Program Files\dotnet\sdk]

.NET runtimes installed:
Microsoft.AspNetCore.All 2.1.2 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.All]
Microsoft.AspNetCore.All 2.1.11 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.All]
Microsoft.AspNetCore.All 2.1.23 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.All]
Microsoft.AspNetCore.All 2.2.1 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.All]
Microsoft.AspNetCore.All 2.2.5 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.All]
Microsoft.AspNetCore.App 2.1.2 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
Microsoft.AspNetCore.App 2.1.11 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
Microsoft.AspNetCore.App 2.1.23 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
Microsoft.AspNetCore.App 2.2.1 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
Microsoft.AspNetCore.App 2.2.5 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
Microsoft.AspNetCore.App 3.1.9 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
Microsoft.AspNetCore.App 5.0.0 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
Microsoft.NETCore.App 2.1.11 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
Microsoft.NETCore.App 2.1.23 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
Microsoft.NETCore.App 2.2.1 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
Microsoft.NETCore.App 2.2.5 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
Microsoft.NETCore.App 3.1.9 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
Microsoft.NETCore.App 5.0.0 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
Microsoft.WindowsDesktop.App 3.1.9 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App]
Microsoft.WindowsDesktop.App 5.0.0 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App]

To install additional .NET runtimes or SDKs:
https://aka.ms/dotnet-download

• The IDE (VS / VS Code/ VS4Mac) you're running on, and it's version
  Visual Studio Community 2019 V16.8.1

[mkArtakMSFT]

Thanks for contacting us.
Would you mind seeing whether this is what you're observing: https://stackoverflow.com/questions/27047972/mousemove-offset-x-y-wrong-in-chrome-when-used-on-a-svg-text-element

[mkArtakMSFT]

If so, then we don't think there is something we / Blazor can do.

[Phexyaa]

Thanks for contacting us.
Would you mind seeing whether this is what you're observing: https://stackoverflow.com/questions/27047972/mousemove-offset-x-y-wrong-in-chrome-when-used-on-a-svg-text-element

Thank you for the reply.
I do not think that is the issue, since I was testing using Firefox and that post seemed to be Chrome specific.
Is there anything you would like me to do to help debug further?

Like I had mentioned I can make a JS call within the event handler and calculate my own offset without any issue save for the added cost of making a JS call on each mouse move.

[Phexyaa]

I just wanted to confirm that my question was clear, since I looked at that SO link again and realized it was from a few years ago. I am using the OffsetX and OffsetY that is built into MouseEventArgs I think this feature was merged in #20478 (hopefully I quoted that correctly) I am not using any other sort of offset given by the browser.

[Phexyaa]

Update

So I found that everything works as expected when I don't modify the line element being drawn.
Also I find it odd that this problem seems directional.
It works just fine in all directions extending outward from the line's origin point. The issue only arises when I decrease the length of the line or in other words move towards the origin point.

I didn't intend this to turn into a request to debug my code, so with the above said if you feel that this is not an issue with Blazor or the new OffsetX and OffsetY that was added with merge #20478 then I will take it to a more appropriate forum.

[SteveSandersonMS]

@Phexyaa Glad you were able to make progress.

In general, Blazor just passes through the offsetX/offsetY values supplied by the browser without being in control of how those values are determined. So it seems that we're not able to affect this. If you later come to believe that Blazor in particular is doing something wrong here, please let us know, otherwise I'll regard this as an external matter.

[Phexyaa]

Thank you for the info, I have one more thing to ask regarding this before I go.
The issue only arises when i change the end point of the line (otherwise coordinates are as expected), which in turn causes the line to be re-rendered. (At least to my understanding)
Is there a chance this affects what element's offset gets passed through? Like, is there a chance the offset that is given is somehow becoming the offset of the line element instead of the svg behind the scenes?