[BUG] Blazor Hybrid white gap/field below status bar

[nathanjeynes]

Description

An out of the box .net 8 maui blazor project, when setting the status bar color either via iOS platform or using .net MAUI toolkit there is a white gap between the blazor webview and the status bar.

Other similar issues have been closed as fixed and therefore wont allow any further comments - however as you will see with my repo this issue is strill present.

• https://github.com/dotnet/maui/issues/11611
• https://github.com/CommunityToolkit/Maui/issues/762

Expected Behavior No white gap to be present like android.

Steps to Reproduce

• Create a new .net 8 Maui Blazor App
• Install .Net Maui Toolkit
• Add the following to the content page

  <ContentPage.Behaviors>
  <toolkit:StatusBarBehavior StatusBarColor="Red" StatusBarStyle="LightContent">
  </toolkit:StatusBarBehavior>
  </ContentPage.Behaviors>
  

Link to public reproduction project repository

https://github.com/nathanjeynes/ExampleMauiStatusBarBug

Version with bug

8.0.3

Is this a regression from previous behavior?

Not sure, did not test other versions

Last version that worked well

Unknown/Other

Affected platforms

iOS

Affected platform versions

iOS 16/17 (tested)

Did you find any workaround?

No, other posts suggested setting the background of the content page but that also sets the background of the bottom safe area also which is not desired.

Relevant log output

No response

[ghost]

We've added this issue to our backlog, and we will work to address it as time and resources allow. If you have any additional information or questions about this issue, please leave a comment. For additional info about issue management, please read our Triage Process.

[mhrastegari]

If I'm not mistaken it's the default margin of HTML's body element that you have to set it to 0.

[XamlTest]

Verified this on Visual Studio Enterprise 17.9.0 Preview 5(8.0.3). Repro on iOS 17.2, not repro on Android 14.0-API34 with below Project: ExampleMauiStatusBarBug.zip

[nathanjeynes]

If I'm not mistaken it's the default margin of HTML's body element that you have to set it to 0.

@mhrastegari This seems to be outside of the inspectable HTML. If you can fix on the example repo using CSS please let me know how you achieved it.

Please remember this only affects iOS and not android.

Thanks

[axylophon]

We have the same problem.

[DanTwomey]

We have the same problem with our iOS app but not Android and it's frustrating.

Any ideas when this will be fixed?

[mhrastegari]

I don't have access to my macOS right now but if this didn't helped

If I'm not mistaken it's the default margin of HTML's body element that you have to set it to 0.

maybe using NavigationPage for setting MainPage in your App.xaml.cs fix it.

[MadalitsoNyemba]

We also have the same problem in our IOS app. It is working on Android. I tried adjusting CSS but to no avail.

I used this hack and worked.

[nathanjeynes]

We also have the same problem in our IOS app. It is working on Android. I tried adjusting CSS but to no avail.

I used this hack and worked.

Great find @MadalitsoNyemba !

For others interested this sets the background colour of the main page, which does fix the issue. Our status bar colour changes so we added an event handler to the main page to toggle the colour when the theme changes.

Hopefully this will however be fixed in a later version so this workaround is not needed!

[Yu-Core]

We also have the same problem in our IOS app. It is working on Android. I tried adjusting CSS but to no avail.

I used this hack and worked.

@MadalitsoNyemba 's method is effective

I'm trying to add some code to deal with screen rotation. It is possible on a virtual machine, but it is uncertain whether it is feasible on a real machine

	protected override void OnHandlerChanged()
	{
		base.OnHandlerChanged();
		
#if IOS
		var window = this.GetParentWindow()?.Handler?.PlatformView as UIWindow;
		if (window is not null)
		{
			var topPadding = window?.SafeAreaInsets.Top ?? 0;

			var statusBar = new UIView(new CoreGraphics.CGRect(0, 0, UIScreen.MainScreen.Bounds.Size.Width, topPadding))
			{
				BackgroundColor = Colors.Green.ToPlatform()
			};
			
			var view = this.Handler?.PlatformView as UIView;
			if (view is not null)
			{
				view?.AddSubview(statusBar);
			}

                        // When screen rotates
                        DeviceDisplay.Current.MainDisplayInfoChanged += (sender, args) =>
                        {
                            var orientation = args.DisplayInfo.Orientation;
                            if (orientation == DisplayOrientation.Landscape)
                            {
                                statusBar.Frame = new(0, 0, UIScreen.MainScreen.Bounds.Size.Width, 0);
                            }
                            else if (orientation == DisplayOrientation.Portrait)
                            {
                                topPadding = window?.SafeAreaInsets.Top ?? 0;
                                statusBar.Frame = new(0, 0, UIScreen.MainScreen.Bounds.Size.Width, topPadding);
                            }
                      };
		}
#endif
	}

[mtanml]

Are there any updates on this? I'm not using Blazor, but have the issue in iOS (except in dark mode). The hack didn't work for me.

[mhrastegari]

For the last trick I'll recommend you to hide the statusbar and then use these for doing padding and whatever spacing you need for status bar (and other safe areas)

https://developer.mozilla.org/en-US/docs/Web/CSS/env

[ianbaddino]

Do you happen to have any updates on this? We recently upgraded to .NET 8 from .NET 7 and this problem appeared. Our client is very specific with aesthetics and considers a gap at the top of the application as not acceptable for an iOS production release.

Is the only option a reversion to .NET 7?