Inconsistent MouseEventArgs OffestX and OffestY in Blazor

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

[SteveSandersonMS]

@Phexyaa I’m afraid I don’t know. This seems to be purely a question about the browser’s internal behaviors. Sorry I can’t give an authoritative answer!

[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?