ScrollView frozen in iOS when data is loaded async

[stankovski]

Description

ScrollView populated via an async operation does not scroll in iOS. It scrolls fine on Maccatalyst and Windows using mouse scroller.

.NET Version: 6.0.400-preview.22330.6

Steps to Reproduce

1. Create a default maui project via command line dotnet new maui -n "maui-repro"
2. In MainPage.cs add the following code:

using System.Collections.ObjectModel;

namespace maui_repro;
public partial class MainPage : ContentPage
{
    public ObservableCollection<AnimalItem> AnimalItems { get; private set; } = new ObservableCollection<AnimalItem>();

    public MainPage()
    {
        InitializeComponent();
        LoadMauiAsset();
        BindingContext = this;
    }

    async Task LoadMauiAsset()
    {
        await Task.Delay(500);
        for (int i = 0; i < 30; i++)
        {
            var item = new AnimalItem();
            item.EnglishContent = "FOR the most wild, yet most homely narrative which I am about to pen, I neither expect nor solicit belief. Mad indeed would I be to expect it, in a case where my very senses reject their own evidence. Yet, mad am I not -- and very surely do I not dream. But to-morrow I die, and to-day I would unburthen my soul. My immediate purpose is to place before the world, plainly, succinctly, and without comment, a series of mere household events. In their consequences, these events have terrified -- have tortured -- have destroyed me. Yet I will not attempt to expound them. To me, they have presented little but Horror -- to many they will seem less terrible than barroques. Hereafter, perhaps, some intellect may be found which will reduce my phantasm to the common-place -- some intellect more calm, more logical, and far less excitable than my own, which will perceive, in the circumstances I detail with awe, nothing more than an ordinary succession of very natural causes and effects.";
            AnimalItems.Add(item);
        }
    }
}

public class AnimalItem 
{
    public string EnglishContent { get; set; }
}

3. In MainPage.xaml add the following XAML

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="maui_repro.MainPage">
    <ScrollView Grid.Row="0" VerticalOptions="FillAndExpand">
        <VerticalStackLayout BindableLayout.ItemsSource="{Binding AnimalItems}">
            <BindableLayout.ItemTemplate>
                <DataTemplate>
                    <Frame CornerRadius="8" Margin="10,5">
                        <Label Text="{Binding EnglishContent}" TextColor="Black"/>
                    </Frame>
                </DataTemplate>
            </BindableLayout.ItemTemplate>
        </VerticalStackLayout>
    </ScrollView>
</ContentPage>

Version with bug

6.0.400

Last version that worked well

Unknown/Other

Affected platforms

iOS

Affected platform versions

iOS 15

Did you find any workaround?

No. I've tried running LoadMauiAsset() inside of OnNavigated event as well as by wrapping it inside of MainThread.BeginInvokeOnMainThread but neither worked.

Relevant log output

No response

[Symbai]

Have you tried wrapping only AnimalItems.Add(item); line inside of MainThread.BeginInvokeOnMainThread?

[stankovski]

Just tested that. Wrapping AnimalItems.Add(item); line inside of MainThread.BeginInvokeOnMainThread made no difference.

[3steve3]

Have you tried to make an ICommand with the loading function, and then instead of loading it from the constructor doing this

protected override void OnAppearing()
{
	base.OnAppearing();
        LoadMauiAssetCommand.Execute(null);
}

[stankovski]

Calling async logic from inside OnAppearing instead of ctor did not make a difference. I'm not sure how using ICommand would help as it's just another .NET class.

I've also experimented with ConfigureAwait and blocking the thread with GetAwaiter().GetResult() but the result was the deadlock where the splash screen never goes away.

[kajetan-kazimierczak]

Did you try
Task.Run(LoadMauiAsset);
instead of LoadMauiAsset() ?
I've seen that construct in a demo somewhere and it works for me.

[stankovski]

Using Task.Run(LoadMauiAsset) and forcing the method to be enqueued in a thread pool has a very bizarre and unexpected consequences. The page sometimes crashes, at other times the ScrollView has no visual elements, and at other times it has only some elements. I would be curious to understand why that is happening.

[stankovski]

Upon further investigation, this seems to be a bug in ScrollView as I was able to get CollectionView and ListView to scroll just fine. Unfortunately CollectionView seems to also have bugs with cell sizing while ListView ViewCell does not work as expected on iOS :/

[pictos]

I could reproduce the error, the workaround was to use CollectionView, but I need to wrap it on the Grid control, because using StackLayout or VerticalStackLayout will sizes the ColloectionView wrong, given it too much height.

[johnl188]

A workaround that I found is to reset the Content on the scrollview. I tested with this example by giving the ScrollView a name of "scrollView" and modifying LoadMauiAsset to

    async Task LoadMauiAsset()
    {
        await Task.Delay(500);
        for (int i = 0; i < 30; i++)
        {
            var item = new AnimalItem();
            item.EnglishContent = "FOR the most wild, yet most homely narrative which I am about to pen, I neither expect nor solicit belief. Mad indeed would I be to expect it, in a case where my very senses reject their own evidence. Yet, mad am I not -- and very surely do I not dream. But to-morrow I die, and to-day I would unburthen my soul. My immediate purpose is to place before the world, plainly, succinctly, and without comment, a series of mere household events. In their consequences, these events have terrified -- have tortured -- have destroyed me. Yet I will not attempt to expound them. To me, they have presented little but Horror -- to many they will seem less terrible than barroques. Hereafter, perhaps, some intellect may be found which will reduce my phantasm to the common-place -- some intellect more calm, more logical, and far less excitable than my own, which will perceive, in the circumstances I detail with awe, nothing more than an ordinary succession of very natural causes and effects.";
            AnimalItems.Add(item);
        }
        var content = scrollView.Content;
        scrollView.Content = null;
        scrollView.Content = content;
    }

I had to set the Content to null first because the set doesn't do anything if the Content value isn't changing from its current value.