[iOS] Wrong sizing of layouts

[RadekVyM]

Description

Hi, I found out that layouts do not react to size changes of their children correctly on iOS. Let's have this quite simple layout:

<Grid RowDefinitions="*, 100">
    <Border VerticalOptions="Center" HorizontalOptions="Center">
        <Grid RowDefinitions="auto" ColumnDefinitions="auto">
            <BoxView Color="Red" HorizontalOptions="Fill" VerticalOptions="Fill"/>
            <ScrollView>
                <StackLayout BackgroundColor="Yellow">
                    <Label Text="This"/>
                    <Label Text="is"/>
                    <Label Text="a"/>
                    <Label Text="StackLayout"/>
                    <Label Text="content"/>
                    <Label x:Name="variableLabel" WidthRequest="100" Text="Label with variable width"/>
                </StackLayout>
            </ScrollView>
        </Grid>
    </Border>

    <Button 
        Grid.Row="1"
        HorizontalOptions="Center" VerticalOptions="Center"
        Text="Change size of the label in StackLayout"
        Clicked="ButtonClicked"/>
</Grid>

On button click, the label with the text "Label with variable width" changes its width from 100 to 200 (and vice versa) - see code behind:

private void ButtonClicked(object sender, EventArgs e)
{
    if (variableLabel.WidthRequest == 100)
        variableLabel.WidthRequest = 200;
    else
        variableLabel.WidthRequest = 100;
}

Examples

Here are examples of how clicking the button behaves on different platforms:

https://user-images.githubusercontent.com/65116078/187763596-76ad063c-a956-47fb-8a6d-15729041eb03.mp4

https://user-images.githubusercontent.com/65116078/187763611-64ae429b-503c-431c-8e69-e9092989d914.mp4

https://user-images.githubusercontent.com/65116078/187763620-cf836071-69ee-4cbc-8809-80153d0e8e9e.mp4

As you can see, it behaves as expected on Windows and Android (containers adjust to the size changes of their content), but on iOS it is completely wrong (containers do not adjust at all). The label with the text "Label with variable width" is also clipped from the bottom, which it should not be.

If I remove the ScrollView from the layout:

https://user-images.githubusercontent.com/65116078/187764749-c6d80c2d-f54e-409d-bd1b-07d547329293.mp4

Containers adjust to the wider label, but then it does not shrink back down.

If I remove the red BoxView too:

https://user-images.githubusercontent.com/65116078/187764856-94fc8ad7-c135-49c1-b1e4-44d866d138e2.mp4

The required behavior is almost there but not entirely - the label is still clipped from the bottom.

The problem is probably present on the macOS version too, but I have not had an opportunity to test it there yet.

I hope my description of the problem is clear. If not, feel free to ask 🙂

Steps to Reproduce

Download the reproduction project, run it, and click the button a few times. You will see the behavior described above.

Link to public reproduction project repository

https://github.com/RadekVyM/MauiBugs/tree/main/iOSWrongSizing

Version with bug

6.0.486 (current)

Last version that worked well

Unknown/Other

Affected platforms

iOS

Affected platform versions

iOS 15

Did you find any workaround?

No

Relevant log output

No response

[ghost]

We've moved this issue to the Backlog milestone. This means that it is not going to be worked on for the coming release. We will reassess the backlog following the current release and consider this item at that time. To learn more about our issue management process and to have better expectation regarding different types of issues you can read our Triage Process.

[faceoffers28]

Is this why RowDefinition sizes and Border.Shadow don't appear to be adhered to on iOS? For example, this Layout looks so much different on iOS. In fact, there are so many problems that it is unusable on iOS. https://github.com/cemahseri/MauiFinance

[borrmann]

+1! I often load dynamic content into stacklayouts (or now verticalstacklayouts) wrapped into scrollviews. On ios I can’t scroll to the bottom of those after the height increased due to updated content. This is very severe as it can hide important content.

[borrmann]

Workaround that works for me is:

<ScrollView x:Name="scrollView">

and calling

var content = scrollView.Content;
scrollView.Content = null;
scrollView.Content = content;

after the content has updated. On more complex pages where many controls update the Layout this is less than ideal though.

[faceoffers28]

@borrmann How do you call scrollView.Content after the content / page has updated? What method are you overriding? Thanks!

[borrmann]

I do it like this

private async void Page_Appearing(object sender, EventArgs e)
{
       // updating content from backend here
      var content = scrollView.Content;
      scrollView.Content = null;
      scrollView.Content = content;
}

and in XAML

<ContentPage Appearing="Page_Appearing" ..... />

But again, for me this works only on pages where I load content once at the beginning. I also have some pages where I have e.g. RadioButtons that add content to my page and I dont really want to begin calling this after every user action, so I don't have an acceptable workaroung for this. On some of my pages the ScrollView also resizes after some interactions with the UI, but I haven't figured out yet what triggers the Layout to recalculate its size correctly.

[faceoffers28]

@borrmann Unfortunately, this didn't fix the RowDefinition sizes and Border.Shadow issues. :(

[MaksimAdamenko]

I have this problem too

[borrmann]

(scrollView as IView).InvalidateMeasure();

was posted as a workaround in issue #8820

[jinxinjuan]

Verified this issue with Visual Studio Enterprise 17.7.0 Preview 1.0. Can repro on iOS platform with sample project. iOSWrongSizing

[IeuanWalker]

Still an issue on 8.0.70