iOS: Rectangle that is invisible when page loads can never be made visible

[RedZone908]

Description

On iOS only, a Rectangle element's IsVisible property is bound to a false value when the page loads, then changing that property to true does not make it fully visible. To be more precise, any space the rectangle should have taken up will indeed be taken up when IsVisible is flipped to true, but the background color of the rectangle will remain transparent. On the other hand, a rectangle whose IsVisible was already true when the page loaded can have its visibility toggled back and forth with the expected result. The bug remains the same whether the bound property is updated through a command or a simple event handler.

The bug is present on Maui 9.0.40 and 8.0.3-8.0.100. Likely present on earlier 9.0.x iterations but did not test those. Did not test anything prior to 8.0.3 either.

Another interesting observation is that the first time the rectangle is made visible, it is not the correct size, but is the second time.

The bug is not present on Android, which correctly makes the rectangle visible in all circumstances. (As a side note, it seems like the HeightRequest isn't always correctly observed on Android, but that would be a separate issue)

This bug doesn't affect other components; for example, a button that is hidden on page load will still become visible as it should when the flag is toggled.

Video of Behavior

Screen.Recording.2025-02-20.114848.mp4

Steps to Reproduce

1. Create a new Maui project
2. Set the content of MainPage.xaml's <ContentPage> node to the following:

<Grid BindingContext="{x:Reference this}">
    <VerticalStackLayout
        Padding="30,0"
        Spacing="25">
        <Image
            Source="dotnet_bot.png"
            HeightRequest="185"
            Aspect="AspectFit"
            SemanticProperties.Description="dot net bot in a race car number eight" />

        <Label
            Text="Hello, World!"
            Style="{StaticResource Headline}"
            SemanticProperties.HeadingLevel="Level1" />

        <Label
            Text="Welcome to &#10;.NET Multi-platform App UI"
            Style="{StaticResource SubHeadline}"
            SemanticProperties.HeadingLevel="Level2"
            SemanticProperties.Description="Welcome to dot net Multi platform App U I" />

        <Button
            x:Name="CounterBtn"
            Text="Swap rectangle visibility"            
            Command="{Binding ButtonClickCommand}"
            HorizontalOptions="Fill" />
        <Rectangle BackgroundColor="LimeGreen" HeightRequest="100" 
                   IsVisible="{Binding ShowGreenRectangle}"
                   />
        <Button Text="HiddenButton" IsVisible="{Binding ShowGreenRectangle}" />
        <Rectangle BackgroundColor="Blue" HeightRequest="100" 
                   IsVisible="{Binding ShowBlueRectangle}"
       />
    </VerticalStackLayout>
</Grid>

3. Set the C# code of the MainPage.xaml.cs codebehind like so:

public partial class MainPage : ContentPage
{
    private bool _showGreenRectangle = false;
    private bool _showBlueRectangle = true;

    public MainPage()
    {
        ButtonClickCommand = new Command(
            execute: ButtonClick,
            canExecute: () => true
        );
        InitializeComponent();
    }

    public bool ShowGreenRectangle
    {
        get => _showGreenRectangle;
        set
        {
            _showGreenRectangle = value;
            OnPropertyChanged(nameof(ShowGreenRectangle));
        }
    }

    public bool ShowBlueRectangle
    {
        get => _showBlueRectangle;
        set
        {
            _showBlueRectangle = value;
            OnPropertyChanged(nameof(ShowBlueRectangle));
        }
    }

    public ICommand ButtonClickCommand { get; private set; }

    private void ButtonClick()
    {
        ShowGreenRectangle = !ShowGreenRectangle;
        ShowBlueRectangle = !ShowBlueRectangle;
    }
}

4. Run the app on iOS.
5. Clicking on the button will make the blue rectangle invisible, and the hidden button will become visible, but the green rectangle will not become visible, though the space for it will be taken up. However, it will not take up even the full amount of space it needs.
6. Clicking on the button will make the blue rectangle visible again and hide the extra button and the space for green rectangle will be collapsed as it should
7. Clicking on the button a third time will cause the same behavior as in step 5, but this time at least the full amount of space for the rectangle will be taken up.

Link to public reproduction project repository

https://github.com/RedZone908/ReproRectangleNeverVisible

Version with bug

9.0.40 SR4, 8.0.3 GA, 8.0.61 SR 6.1, 8.0.100 SR10, most likely all other 8.0.x and 9.0.x iterations.

Unknown if 6.0.x and 7.0.x are affected or not.

Is this a regression from previous behavior?

No, this is something new

Last version that worked well

No response

Affected platforms

iOS

Affected platform versions

iOS 17, possibly others

Did you find any workaround?

The workaround at the moment is to make the rectangle briefly visible when the page loads but then make it invisible in an OnAppearing event handler after some number of milliseconds, like so:

public partial class WorkaroundPage : ContentPage
{
    private bool _showGreenRectangle = true;
    private bool _showBlueRectangle = true;

    public WorkaroundPage()
    {
        ButtonClickCommand = new Command(
            execute: ButtonClick,
            canExecute: () => true
        );
        InitializeComponent();
    }

    public bool ShowGreenRectangle
    {
        get => _showGreenRectangle;
        set
        {
            _showGreenRectangle = value;
            OnPropertyChanged(nameof(ShowGreenRectangle));
        }
    }

    public bool ShowBlueRectangle
    {
        get => _showBlueRectangle;
        set
        {
            _showBlueRectangle = value;
            OnPropertyChanged(nameof(ShowBlueRectangle));
        }
    }

    public ICommand ButtonClickCommand { get; private set; }

    private void ButtonClick()
    {
        ShowGreenRectangle = !ShowGreenRectangle;
        ShowBlueRectangle = !ShowBlueRectangle;
    }

    protected sealed override async void OnAppearing()
    {
        await Task.Delay(1000);
        ShowGreenRectangle = false;
    }
}

Relevant log output