Two identical syncronized <ScrollViewer> components don't align

[MIKAELMATZEN]

Describe the bug

I have two ScrollViever components side by side, each containing a StackPanel with the same number of elements all of the same size. The two ScrollView components are synchronized through the ViewChanged event.

When one ScrollViewer is scrolled all the way to the bottom, the two ScrollViewer components are misaligned by one or two pixels. Scrolling the last pixel in the ScrollViewer I am scrolling does not trigger the ViewChanged event.

Steps to reproduce the bug

See the following XAML / C# code:

<Grid>

    <Grid.RowDefinitions>
        <RowDefinition Height="50"/>
        <RowDefinition Height="*"/>
        <RowDefinition Height="50"/>
    </Grid.RowDefinitions>

    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="50"/>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="50"/>
    </Grid.ColumnDefinitions>

    <ScrollViewer
        Grid.Row="1"
        Grid.Column="1"
        x:Name="LeftScrollViewer"
        ViewChanged="LeftScrollViewer_ViewChanged">

        <StackPanel
            Orientation="Vertical"
            Padding="0,0,0,0"
            Spacing="10">

            <Rectangle Height="50" Fill="Gray" HorizontalAlignment="Stretch"/>
            <Rectangle Height="50" Fill="DarkGray" HorizontalAlignment="Stretch"/>
            <Rectangle Height="50" Fill="Gray" HorizontalAlignment="Stretch"/>
            <Rectangle Height="50" Fill="DarkGray" HorizontalAlignment="Stretch"/>
            <Rectangle Height="50" Fill="Gray" HorizontalAlignment="Stretch"/>
            <Rectangle Height="50" Fill="DarkGray" HorizontalAlignment="Stretch"/>
            <Rectangle Height="50" Fill="Gray" HorizontalAlignment="Stretch"/>
            <Rectangle Height="50" Fill="DarkGray" HorizontalAlignment="Stretch"/>
            <Rectangle Height="50" Fill="Gray" HorizontalAlignment="Stretch"/>
            <Rectangle Height="50" Fill="DarkGray" HorizontalAlignment="Stretch"/>
            <Rectangle Height="50" Fill="Gray" HorizontalAlignment="Stretch"/>
            <Rectangle Height="50" Fill="DarkGray" HorizontalAlignment="Stretch"/>
            <Rectangle Height="50" Fill="Gray" HorizontalAlignment="Stretch"/>
            <Rectangle Height="50" Fill="DarkGray" HorizontalAlignment="Stretch"/>
            <Rectangle Height="50" Fill="Gray" HorizontalAlignment="Stretch"/>
            <Rectangle Height="50" Fill="DarkGray" HorizontalAlignment="Stretch"/>
            <Rectangle Height="50" Fill="Gray" HorizontalAlignment="Stretch"/>
            <Rectangle Height="50" Fill="DarkGray" HorizontalAlignment="Stretch"/>
            <Rectangle Height="50" Fill="Gray" HorizontalAlignment="Stretch"/>
            <Rectangle Height="50" Fill="DarkGray" HorizontalAlignment="Stretch"/>
            <Rectangle Height="50" Fill="Gray" HorizontalAlignment="Stretch"/>
            <Rectangle Height="50" Fill="DarkGray" HorizontalAlignment="Stretch"/>
            <Rectangle Height="50" Fill="Gray" HorizontalAlignment="Stretch"/>
            <Rectangle Height="50" Fill="DarkGray" HorizontalAlignment="Stretch"/>
            <Rectangle Height="50" Fill="Gray" HorizontalAlignment="Stretch"/>
            <Rectangle Height="50" Fill="DarkGray" HorizontalAlignment="Stretch"/>
            <Rectangle Height="50" Fill="Gray" HorizontalAlignment="Stretch"/>
            <Rectangle Height="50" Fill="DarkGray" HorizontalAlignment="Stretch"/>
            <Rectangle Height="50" Fill="Gray" HorizontalAlignment="Stretch"/>
            <Rectangle Height="50" Fill="DarkGray" HorizontalAlignment="Stretch"/>
            <Rectangle Height="50" Fill="Gray" HorizontalAlignment="Stretch"/>
            <Rectangle Height="50" Fill="DarkGray" HorizontalAlignment="Stretch"/>
            <Rectangle Height="50" Fill="Gray" HorizontalAlignment="Stretch"/>
            <Rectangle Height="50" Fill="DarkGray" HorizontalAlignment="Stretch"/>
            <Rectangle Height="50" Fill="Gray" HorizontalAlignment="Stretch"/>
            <Rectangle Height="50" Fill="DarkGray" HorizontalAlignment="Stretch"/>
            <Rectangle Height="50" Fill="Gray" HorizontalAlignment="Stretch"/>
            <Rectangle Height="50" Fill="DarkGray" HorizontalAlignment="Stretch"/>

        </StackPanel>
        
    </ScrollViewer>

    <ScrollViewer
        Grid.Row="1"
        Grid.Column="2"
        x:Name="RightScrollViewer"
        ViewChanged="RightScrollViewer_ViewChanged">

        <StackPanel
            Orientation="Vertical"
            Padding="0,0,0,0"                
            Spacing="10">

            <Rectangle Height="50" Fill="Gray" HorizontalAlignment="Stretch"/>
            <Rectangle Height="50" Fill="DarkGray" HorizontalAlignment="Stretch"/>
            <Rectangle Height="50" Fill="Gray" HorizontalAlignment="Stretch"/>
            <Rectangle Height="50" Fill="DarkGray" HorizontalAlignment="Stretch"/>
            <Rectangle Height="50" Fill="Gray" HorizontalAlignment="Stretch"/>
            <Rectangle Height="50" Fill="DarkGray" HorizontalAlignment="Stretch"/>
            <Rectangle Height="50" Fill="Gray" HorizontalAlignment="Stretch"/>
            <Rectangle Height="50" Fill="DarkGray" HorizontalAlignment="Stretch"/>
            <Rectangle Height="50" Fill="Gray" HorizontalAlignment="Stretch"/>
            <Rectangle Height="50" Fill="DarkGray" HorizontalAlignment="Stretch"/>
            <Rectangle Height="50" Fill="Gray" HorizontalAlignment="Stretch"/>
            <Rectangle Height="50" Fill="DarkGray" HorizontalAlignment="Stretch"/>
            <Rectangle Height="50" Fill="Gray" HorizontalAlignment="Stretch"/>
            <Rectangle Height="50" Fill="DarkGray" HorizontalAlignment="Stretch"/>
            <Rectangle Height="50" Fill="Gray" HorizontalAlignment="Stretch"/>
            <Rectangle Height="50" Fill="DarkGray" HorizontalAlignment="Stretch"/>
            <Rectangle Height="50" Fill="Gray" HorizontalAlignment="Stretch"/>
            <Rectangle Height="50" Fill="DarkGray" HorizontalAlignment="Stretch"/>
            <Rectangle Height="50" Fill="Gray" HorizontalAlignment="Stretch"/>
            <Rectangle Height="50" Fill="DarkGray" HorizontalAlignment="Stretch"/>
            <Rectangle Height="50" Fill="Gray" HorizontalAlignment="Stretch"/>
            <Rectangle Height="50" Fill="DarkGray" HorizontalAlignment="Stretch"/>
            <Rectangle Height="50" Fill="Gray" HorizontalAlignment="Stretch"/>
            <Rectangle Height="50" Fill="DarkGray" HorizontalAlignment="Stretch"/>
            <Rectangle Height="50" Fill="Gray" HorizontalAlignment="Stretch"/>
            <Rectangle Height="50" Fill="DarkGray" HorizontalAlignment="Stretch"/>
            <Rectangle Height="50" Fill="Gray" HorizontalAlignment="Stretch"/>
            <Rectangle Height="50" Fill="DarkGray" HorizontalAlignment="Stretch"/>
            <Rectangle Height="50" Fill="Gray" HorizontalAlignment="Stretch"/>
            <Rectangle Height="50" Fill="DarkGray" HorizontalAlignment="Stretch"/>
            <Rectangle Height="50" Fill="Gray" HorizontalAlignment="Stretch"/>
            <Rectangle Height="50" Fill="DarkGray" HorizontalAlignment="Stretch"/>
            <Rectangle Height="50" Fill="Gray" HorizontalAlignment="Stretch"/>
            <Rectangle Height="50" Fill="DarkGray" HorizontalAlignment="Stretch"/>
            <Rectangle Height="50" Fill="Gray" HorizontalAlignment="Stretch"/>
            <Rectangle Height="50" Fill="DarkGray" HorizontalAlignment="Stretch"/>
            <Rectangle Height="50" Fill="Gray" HorizontalAlignment="Stretch"/>
            <Rectangle Height="50" Fill="DarkGray" HorizontalAlignment="Stretch"/>

        </StackPanel>

    </ScrollViewer>


</Grid>

    /// <summary>
    /// 
    /// </summary>
    /// <param name="sender"></param>
    /// <param name="e"></param>
    private void LeftScrollViewer_ViewChanged( object sender, ScrollViewerViewChangedEventArgs e )
    {
        RightScrollViewer.ChangeView( null, LeftScrollViewer.VerticalOffset, null, true );
    }

    /// <summary>
    /// 
    /// </summary>
    /// <param name="sender"></param>
    /// <param name="e"></param>
    private void RightScrollViewer_ViewChanged( object sender, ScrollViewerViewChangedEventArgs e )
    {
        LeftScrollViewer.ChangeView( null, RightScrollViewer.VerticalOffset, null, true );
    }

Expected behavior

The two should move totally synchronized since the animation is disabled. When you try to scroll them all the wqy to the bottom you will see that one is misaligned by one or two pixels.

Screenshots

NuGet package version

WinUI 3 - Windows App SDK 1.6 Experimental 2: 1.6.240701003-experimental2

Windows version

No response

Additional context

My WIndows Version is 23H2

[kmgallahan]

Does it repro with display scaling set to 100%?

[MIKAELMATZEN]

@kmgallahan - no, it doesn't. At Display scaling 100% they align perfectly ...

[kmgallahan]

That means layout rounding is used when the UI is scaled, and the positioning logic is different when handling input vs values set via code.

[MIKAELMATZEN]

@kmgallahan - ok, thanks ...

Does that mean it is "works as designed", or that a fix will be created?

[kmgallahan]

Most 'off by a pixel' stuff is related to scaling, so I just wanted to check if that was the case here.

Otherwise, I'm not an MS employee so no idea how they are allocating funding to resolve misc. aesthetic issues.

[MIKAELMATZEN]

@kmgallahan - ok, thanks Kevin :)