Bug: Rendering regression in WinUI 3 with Paths

[yaira2]

Describe the bug

I found a bug with WinUI 3(WinAppSDK) that affects the rendering of a Canvas containing path elements. The bug occurs when the screen scaling is set to 175%, which causes the Path elements to appear distorted and blurry compared to the same XAML code in a UWP app.

Steps to reproduce the bug

1. Set screen scaling to 175%
2. Add this xaml to a blank page and compare WinAppSdk to UWP

<Canvas
    Width="28"
    Height="28"
    HorizontalAlignment="Center"
    VerticalAlignment="Center">
    <Path
        x:Name="Path1"
        Data="M5.25 10C4.55964 10 4 10.5596 4 11.25V15.75C4 16.4404 4.55964 17 5.25 17H9.75C10.4404 17 11 16.4404 11 15.75V11.25C11 10.5596 10.4404 10 9.75 10H5.25Z"
        Fill="white" />
    <Path
        x:Name="Path2"
        Data="M12 11.25C12 10.0074 10.9926 9 9.75 9H5.25C4.00736 9 3 10.0074 3 11.25V15.75C3 16.9926 4.00736 18 5.25 18H9.75C10.9926 18 12 16.9926 12 15.75V11.25ZM5.25 10.5H9.75C10.1642 10.5 10.5 10.8358 10.5 11.25V15.75C10.5 16.1642 10.1642 16.5 9.75 16.5H5.25C4.83579 16.5 4.5 16.1642 4.5 15.75V11.25C4.5 10.8358 4.83579 10.5 5.25 10.5Z"
        Fill="Black" />
    <Path
        x:Name="Path3"
        Data="M14.75 10.5C14.3358 10.5 14 10.8358 14 11.25C14 11.6642 14.3358 12 14.75 12H24.25C24.6642 12 25 11.6642 25 11.25C25 10.8358 24.6642 10.5 24.25 10.5H14.75Z"
        Fill="Black" />
    <Path
        x:Name="Path4"
        Data="M14.75 14.5C14.3358 14.5 14 14.8358 14 15.25C14 15.6642 14.3358 16 14.75 16H21.25C21.6642 16 22 15.6642 22 15.25C22 14.8358 21.6642 14.5 21.25 14.5H14.75Z"
        Fill="Black" />
</Canvas>

<Canvas
	Width="16"
	Height="16"
	HorizontalAlignment="Center"
	VerticalAlignment="Center">
	<Path
		x:Name="Path1"
		Data="M2.5 2H4.08535C4.29127 2.5826 4.84689 3 5.5 3H8.5C9.15311 3 9.70873 2.5826 9.91465 2H11.5C11.7761 2 12 2.22386 12 2.5V3.5C12 3.77614 12.2239 4 12.5 4C12.7761 4 13 3.77614 13 3.5V2.5C13 1.67157 12.3284 1 11.5 1H9.91465C9.70873 0.417404 9.15311 0 8.5 0H5.5C4.84689 0 4.29127 0.417404 4.08535 1H2.5C1.67157 1 1 1.67157 1 2.5V14.5C1 15.3284 1.67157 16 2.5 16H5.5C5.77614 16 6 15.7761 6 15.5C6 15.2239 5.77614 15 5.5 15H2.5C2.22386 15 2 14.7761 2 14.5V2.5C2 2.22386 2.22386 2 2.5 2ZM5.5 2C5.22386 2 5 1.77614 5 1.5C5 1.22386 5.22386 1 5.5 1H8.5C8.77614 1 9 1.22386 9 1.5C9 1.77614 8.77614 2 8.5 2H5.5Z"
		Fill="black" />
	<Path
		x:Name="Path2"
		Data="M8 6.5C8 6.22386 8.22386 6 8.5 6H13.5C13.7761 6 14 6.22386 14 6.5V14.5C14 14.7761 13.7761 15 13.5 15H8.5C8.22386 15 8 14.7761 8 14.5V6.5Z"
		Fill="white" />
	<Path
		x:Name="Path3"
		Data="M8.5 5C7.67157 5 7 5.67157 7 6.5V14.5C7 15.3284 7.67157 16 8.5 16H13.5C14.3284 16 15 15.3284 15 14.5V6.5C15 5.67157 14.3284 5 13.5 5H8.5ZM8 6.5C8 6.22386 8.22386 6 8.5 6H13.5C13.7761 6 14 6.22386 14 6.5V14.5C14 14.7761 13.7761 15 13.5 15H8.5C8.22386 15 8 14.7761 8 14.5V6.5Z"
		Fill="black" />
	<Path
		x:Name="Path4"
		Data="M2.5 2H4.08535C4.29127 2.5826 4.84689 3 5.5 3H8.5C9.15311 3 9.70873 2.5826 9.91465 2H11.5C11.7761 2 12 2.22386 12 2.5V4H8.5C7.11929 4 6 5.11929 6 6.5V15H2.5C2.22386 15 2 14.7761 2 14.5V2.5C2 2.22386 2.22386 2 2.5 2Z"
		Fill="white" />
</Canvas>

Expected behavior

The expected behavior is to render the paths just as well as in UWP or better.

Screenshots

Top is UWP, bottom is WinUI 3

This example shows that it's not just being clipped by the canvas

NuGet package version

None

Windows version

Windows 11 (22H2): Build 22621

Additional context

No response

[MartyIX]

(This would probably fix dotnet/maui#21087)

[Lukiluc29]

This is still a very disturbing issue for users! Even when setting Windows to 100%, it still happens over and over again. It would be great to look into this problem in order to find a solution to fix it.

[IviriusMain]

Yet another difference between UWP and WinUI 3 that shouldn't exist in the first place (I also have issues with DPI scaling on this)

[MartyIX]

@IviriusMain Please upvote this issue. Perhaps it will get more attention then.

I would imagine that this might be easy to fix but I don't really know.