CollectionView items height is all over the place when scrolling on iOS (.Net 8 + MAUI workload 8.0.0-rc.1.9171/8.0.100-rc.1)

[eddieyanez]

Description

The items on a CollectionView render correctly on load, but immediately after simply scrolling, are all over the place with gaps in between and overlapping.

This is an issue on iPhone 14 Pro (iOS 16) and iPhone 15 Pro (iOS 17) simulators.

Issue was found when we decided to finally upgrade from Xamarin to MAUI, but given the issue, migration is on hold until resolved.

Screenshots

On render:

After scrolling iPhone 14 Pro simulator:

After scrolling iPhone 15 Pro simulator:

After scrolling iPhone 15 Pro simulator:

This is not an issue on Android:

Steps to Reproduce

1. Create a new .Net MAUI app using the latest workload as of 7 October 2023.

2. Replace MainPage.xaml Content with code below and clear code behind:

    <ContentPage.BindingContext>
        <vm:MainPageViewModel/>
    </ContentPage.BindingContext>

    <CollectionView ItemsSource="{Binding Items}">
        <CollectionView.ItemTemplate>

            <DataTemplate x:DataType="x:String">

                <VerticalStackLayout Padding="10">

                    <Border StrokeShape="RoundRectangle 15"
                            BackgroundColor="White"
                            Padding="10">

                        <Grid ColumnDefinitions="40,*" ColumnSpacing="10">

                            <!-- Avatar -->
                            <VerticalStackLayout VerticalOptions="Start"
                                                    Spacing="5">

                                <Image Source="dotnet_bot.png"
                                       WidthRequest="40"
                                       HeightRequest="40"
                                       VerticalOptions="Start"
                                       HorizontalOptions="Center" />

                            </VerticalStackLayout>

                            <!--Main content-->
                            <VerticalStackLayout Grid.Column="1">

                                <!--Username and date --> 
                                <Grid Margin="0,0,0,10">

                                    <Label Text="Username"
                                           FontFamily="OpenSansSemibold"
                                           HorizontalOptions="Start"
                                           />

                                    <Label Text="today"
                                           FontFamily="OpenSansSemibold"
                                           VerticalOptions="Center"
                                           HorizontalOptions="End" />

                                </Grid>

                                <!-- Text--> 
                                <Label Text="{Binding }" Margin="0,0,0,10"/>

                            </VerticalStackLayout>

                        </Grid>

                    </Border>

                </VerticalStackLayout>

            </DataTemplate>

        </CollectionView.ItemTemplate>
    </CollectionView>

3. Create file MainPageViewModel.cs file at root with code below:

using System.Collections.ObjectModel;

public class MainPageViewModel
{

      public ObservableCollection<string> Items { get; set; } = new()
      {
          "If you're visiting this page, you're likely here because you're searching for a random sentence.",
          "Sometimes a random word just isn't enough, and that is where the random sentence generator comes into play. By inputting the desired number, you can make a list of as many random sentences as you want or need. Producing random sentences can be helpful in a number of different ways.",
          "For writers, a random sentence can help them get their creative juices flowing. Since the topic of the sentence is completely unknown, it forces the writer to be creative when the sentence appears. There are a number of different ways a writer can use the random sentence for creativity. The most common way to use the sentence is to begin a story. Another option is to include it somewhere in the story. A much more difficult challenge is to use it to end a story. In any of these cases, it forces the writer to think creatively since they have no idea what sentence will appear from the tool.",
          "For those writers who have writers' block, this can be an excellent way to take a step to crumbling those walls.",
          "It can also be successfully used as a daily exercise to get writers to begin writing. Being shown a random sentence and using it to complete a paragraph each day can be an excellent way to begin any writing session.",
          "By taking the writer away from the subject matter that is causing the block, a random sentence may allow them to see the project they're working on in a different light and perspective. Sometimes all it takes is to get that first sentence down to help break the block.",
          "It can also be a fun way to surprise others. You might choose to share a random sentence on social media just to see what type of reaction it garners from others. It's an unexpected move that might create more conversation than a typical post or tweet.",
          "Have several random sentences generated and you'll soon be able to see if they can help with your project."
      };

}

Link to public reproduction project repository

No response

Version with bug

8.0.0-rc.1.9171

Is this a regression from previous behavior?

Not sure, did not test other versions

Last version that worked well

Unknown/Other

Affected platforms

iOS

Affected platform versions

iOS 16 and iOS 17

Did you find any workaround?

Sadly not.

Relevant log output

No response

[ghost]

We've added this issue to our backlog, and we will work to address it as time and resources allow. If you have any additional information or questions about this issue, please leave a comment. For additional info about issue management, please read our Triage Process.

[XamlTest]

Verified this on Visual Studio Enterprise 17.8.0 Preview 3.0(8.0.0-rc.2.9373). Repro on iOS 16.4 and Windows 11, not repro on Android 13.0-API33 with below Project:
17890.zip

[Gekidoku]

High prio for me as well. kinda forced to replace every collectionView with a bindablelayout verticalstacklayout at this point. which is way laggyer than collectionview was in xamarin.forms

[Gekidoku]

Anyone has any workaround?
im using a bindablelayout now on a verticalstacklayout. However if the source gets updated then it redraws the entire list. and doesnt just update the singular item.

[Gekidoku]

Updated https://github.com/Gekidoku/UnfocusTest/ to have a page that contains eddie's code

[eddieyanez]

Anyone has any workaround? im using a bindablelayout now on a verticalstacklayout. However if the source gets updated then it redraws the entire list. and doesnt just update the singular item.

None so far, but I believe a fix is in the works.

[PureWeen]

#18986