[BUG] iOS extra space at bottom of the status bar

[KevThompson2020]

Is there an existing issue for this?

• [x] I have searched the existing issues

Did you read the "Reporting a bug" section on Contributing file?

• [x] I have read the "Reporting a bug" section on Contributing file: https://github.com/CommunityToolkit/Maui/blob/main/CONTRIBUTING.md#reporting-a-bug

Current Behavior

On iOS we are seeing some extra space on the status bar. this issue is also shown here ( [kubaflo] commented [on Oct 30, 2024] )

https://github.com/CommunityToolkit/Maui/pull/2309

But is still happening for me. In my observations it was noticed that this is also related to the NavBar being hidden, the space does not appear if the navBar is shown but does if the navbar is hidden.

Expected Behavior

No extra space should be shown between the status bar and the content of the ContentPage.

Steps To Reproduce

add a tool kit status bar to a contentPage.

Here is some XAML to reproduce the issue

` <ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="<ProjectName>.DetailPage" Shell.NavBarIsVisible="False" Title="DetailPage">

<ContentPage.Behaviors>
    <toolkit:StatusBarBehavior
        StatusBarColor="{AppThemeBinding Light={StaticResource StatusBarColor}, Dark={StaticResource StatusBarColorDark}}"
        StatusBarStyle="LightContent" />
</ContentPage.Behaviors>

<Grid
    HorizontalOptions="FillAndExpand"
    BackgroundColor="Chocolate">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>
    <BoxView Grid.Row="0" 
             HeightRequest="50"
             BackgroundColor="Red"/>
    <BoxView Grid.Row="1"
             HeightRequest="50"
             BackgroundColor="Green"/>
    <BoxView Grid.Row="2"
             HeightRequest="50"
             BackgroundColor="Blue"/>
</Grid>

</ContentPage>`

Link to public reproduction project repository

N/A

Environment

- .NET MAUI CommunityToolkit: 12.0.0
- OS: IOS,  tested on 17 and 18.
- .NET MAUI: 9.0.80

Anything else?

Additional Notes: This might feel like a random bug as it can appear without the statusBar in the xaml, once the statusbar has been added to 1 screen it cascades to others shown after.

Workaround: If you are seeing this and need a quick fix you can add platform specific padding to your layout to push the content up.

<Grid.Padding> <OnPlatform x:TypeArguments="Thickness"> <On Platform="iOS" Value="0,-8,0,0" /> <On Platform="Android" Value="0,0,0,0" /> <On Platform="WinUI" Value="0,0,0,0" /> </OnPlatform> </Grid.Paddin

[dotnet-policy-service[bot]]

Hi @@KevThompson2020! We have added the https://github.com/CommunityToolkit/Maui/labels/needs%20reproduction label to this issue, which indicates that we are unable to take further action until you provide a reproduction sample that we can use to reproduce + fix your bug. In accordance with the Reporting a bug section of our Contributing.md that you confirmed reading before you submitted this Issue, we ask that every Issue author provide a link to an open-source repository containing the reproduction sample app. This issue will be closed automatically in 5 days if we do not receive a reproduction sample from you. Please feel free to re-open this Issue once you have provided a reproduction sample.

[KevThompson2020]

Reproduction project. its showing immediatly for me on a hello world project when the status bar colour is added. if you click the "click me" button there are some sub pages to show it rolling over to children pages.

Additional note, this is devices specific, the space seems to change size depending on the size of the device testing on. Smaller devices do not show the issue at all. this was tested on an iPhone 15 simulator on iOS 17.0

https://github.com/KevThompson2020/StatusBarSpaceTestProject