[BUG] StatusBarBehavior does not occupy entire notch for modal pages when NavigationPage.HasNavigationBar="False" (iOS)

[Axemasta]

Is there an existing issue for this?

• I have searched the existing issues

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

• 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

Crossposting this issue from Maui because I originally believed it to be a maui issue however with a little testing I've realized its an MCT issue.

Description

If you push a modal page (new NavigationPage(new FooPage())) and set NavigationPage.HasNavigationBar="False" there is a small top padding applied to the content page. This padding is not present when the navigation bar is being displayed.

Originally I thought this was an issue caused somewhere in prism (see #3064) however after upgrading to the latest maui controls & workloads version (8.0.91 controls, 8.0.82/8.0.400.2 workloads) I have noticed the issue got worse (the padding required has gone from 5px to 8px). I have been able to reproduce, in my reproduction the base page has no padding & the modal does:

Landing - non modal page

Modal page, the thin like between the yellow & green should not be there

Steps to Reproduce

1. Navigate modally to a navigation page wrapped content page
2. On the content page set NavigationPage.HasNavigationBar="False"
3. Try and place content at the very top of the content page

Version with bug

8.0.91 SR9.1

Is this a regression from previous behavior?

Yes, this used to work in Xamarin.Forms

Last version that worked well

Unknown/Other

Affected platforms

iOS

Affected platform versions

iOS 16+

Did you find any workaround?

Set a negative top padding of -8px:

<ContentPage.Padding>
    <OnPlatform x:TypeArguments="Thickness">
        <!-- <On Platform="iOS" Value="0,-8,0,0" /> -->
    </OnPlatform>
</ContentPage.Padding>

Relevant log output

No response

Expected Behavior

Status bar is fully coloured in for any type of page

Steps To Reproduce

View sample app, see above as this issue has been crossposted from maui

Link to public reproduction project repository

https://github.com/Axemasta/NavigationBarPaddingRepro

Environment

• .NET MAUI CommunityToolkit:
• OS: iOS
• .NET MAUI: 8.0.91 SR9.1 (All affected)

Anything else?

No response

[TheCodeTraveler]

Workaround

For modal pages, Apple recommends using a PageSheet.

This both adhere's to Apple's Human Interface Guidelines and avoids the StatusBar padding noted above.

In C#:

On<iOS>().SetModalPresentationStyle(UIModalPresentationStyle.PageSheet);

In XAML:

<ContentPage ...
             xmlns:ios="clr-namespace:Microsoft.Maui.Controls.PlatformConfiguration.iOSSpecific;assembly=Microsoft.Maui.Controls"
             ios:Page.ModalPresentationStyle="PageSheet">
    ...
</ContentPage>

More information on iOS Page Presentation Styles:
https://learn.microsoft.com/dotnet/maui/ios/platform-specifics/page-presentation-style

Sample

Here's a sample from my app, GitTrends: https://github.com/brminnick/GitTrends/blob/fb7809d6fabd63b401f8d087d7a78f1e70e908da/GitTrends/Pages/ReferringSitesPage.cs#L32-L36

[Axemasta]

For modal pages, Apple recommends using a PageSheet.

Whilst I do agree, this presentation style is EXTREMELY bug ridden in maui at the moment. Theres all sorts of problems that arise by using PageSheets so its user beware. The old style is much safer, especially if the modal needs its own navigation flow!

[JyotheeshKummara]

“I am experiencing the same notch space issue when using the Status Bar behavior on my iPhone 15, although it works perfectly on the iPhone 13 and 14.

I have a Content Page with a Grid layout and StatusBar behavior. If I remove the StatusBar, it functions correctly.
Refer below the sample code.

<ContentPage xmlns="
http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="
http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="ModalPageSample.NewPage1"
xmlns:ios="clr-namespace:Microsoft.Maui.Controls.PlatformConfiguration.iOSSpecific;assembly=Microsoft.Maui.Controls"
xmlns:tool="
http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
ios:Page.UseSafeArea="True"
BackgroundColor="White"
HideSoftInputOnTapped="False"
NavigationPage.HasNavigationBar="True"
Opacity="1">
<ContentPage.Behaviors>
<tool:StatusBarBehavior x:Name="statusbar" StatusBarColor="Blue" />
</ContentPage.Behaviors>