Top tab bar on Shell hides content (iOS only)

[BFuchshofer]

trafficstars

Description

There is a problem on iOS when attempting to add content to a page with top tabs in a shell application. The top tab bar seems to overlay the content of the page. On Android, it works as expected.

For the content, I added a StackLayout with Vertical and HorizontalOptions set to "FillAndExpand." Additionally, the layout has a margin of 8. However, as you can see on iOS, there is no top margin visible.

Steps to Reproduce

1. Create a new Maui App.
2. In Shell.xaml, add a <Tab> with multiple <ShellContent> and Pages (or use the same page for every content).
3. In your used Page.xaml, add a StackLayout with VerticalOptions="FillAndExpand" and HorizontalOptions="FillAndExpand".
4. Add a margin to the StackLayout, so you can observe the differences in margins on each side.
5. Enhance the visual representation by adding a pleasing color to the StackLayout.
6. Test on iOS and Android

Link to public reproduction project repository

https://github.com/BFuchshofer/Maui.iOS.TopTabBar

Version with bug

8.0.3

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 17

Did you find any workaround?

No response

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.

[XamlTest]

Verified this on Visual Studio Enterprise 17.9.0 Preview 2(8.0.3). Repro on iOS 17.0, not repro on Android 14.0-API34 with below Project: Maui.iOS.TopTabBar.zip