I think this is just how iOS works. With iOS you can draw behind the status bar if that's what you want. I encountered the same and wrote about it here: https://blog.verslu.is/maui/change-maui-ios-status-bar-color/

I am wondering if we should add that to the templates by default, that will also help create a more unified look-and-feel across the different platforms. It will add some platform-specific code. So if we were to add it I think we should have an easy way for users to change the statusbar color.

I think there are 3 possible solutions here:

1. Leave as-is and leave it up to the user to implement however they want; I don't like this one, the out-of-the-box experience should be great
2. Add the custom status bar thing I wrote to the templates; as said: we need to add an easy way to change the color, shouldn't be too hard
3. Make the BlazorWebView take into account the size of the status bar and add a top margin so it doesn't go behind it; this will look cleaner, but the background will then probably be white and leave people wondering how to customize that.

Thoughts?

Notice the following behavior with the iPhone notch.

this boils down to the "safe area" concept introduced with the iPhone X.

• https://medium.com/rosberryapps/ios-safe-area-ca10e919526f
• https://developer.apple.com/documentation/uikit/uiview/positioning_content_relative_to_the_safe_area

MAUI does integrate with this property, however just enabling it, enables padding for all safe areas, which doesn't match our overall formatting style:

From the git history, it looks like @PureWeen initially worked on that functionality. Do you have any tips on how we may be able to integrate Safe Areas within MAUI to prevent WebView content from overlapping the status bar / notch, while avoiding the additional padding on the other sides?

I tried manually setting the safe area insets, without luck:

		var insets = On<iOS>().SafeAreaInsets();
		insets.Bottom = 0;
		var safeareaPadding = new Thickness(insets.Left, insets.Top, insets.Right, insets.Bottom);
		On<iOS>().SetSafeAreaInsets(safeareaPadding);
		On<iOS>().SetUseSafeArea(true);

PS: From my research, using CSS to get around this issue is discouraged: https://stackoverflow.com/a/39505453/17995448

• Given Safe Areas are a natively supported concept in iOS, I think we should be safe in terms of forward compatibility. Ie, with changing future form factors of future iOS devices, the Safe Areas concept should give us some protection that we don't produce strange formatting.

Scratch that last part about CSS; @javiercn pointed out https://webkit.org/blog/7929/designing-websites-for-iphone-x/ which looks like it may help here.

Currently:

With viewport-fit=cover:

We do get a bit of overlap with the notch, but it's better than the alternative. The only issue I can see is if it doesn't meet Apple's HCI guidelines, which could cause issues with App Store publishing.

Note, we aren't able to control the status bar color presently in MAUI; #6159

Thus, to get around the issue with dark content (date/time) and the dark blazor maui sidebar in the status bar:

we'd have to add some sort of element at the top to take the place of the status bar. This element should also remain in a fixed / sticky position.

This can be achieved either via HTML/CSS or via Xamarin Forms.