.NET MAUI Blazor not rendering bottom of display for iOS - css

Question

I am having some difficulty with a .NET MAUI Blazor project, I am not very familiar with the platform. The application in question was created from the template demo app created upon project setup in visual studio. (I am just testing this snippet to see if I can get it to work in isolation before adding it to the rest of my project). The issue I am having only seems to persist when running the application on iOS devices (The task bar is on the bottom of the screen on windows, Android and MacCatalyst). I am trying to create a task bar fixed to the bottom of the display. Upon launch the task bar is some distance from the bottom and I can't seem to override this to make it actually on the bottom. For some unknown reason the task bar does jump to the bottom of the display after you rotate the device 90 degrees and back. The project is unchanged from the template with the exception of the following code snippet pasted into the NavMenu.razor file:
<nav class="navbar navbar-expand fixed-bottom" style="background-color: beige">
<div class="container-fluid">
<div class="nav-item d-inline-flex">
<NavLink class="nav-link text-center" href="/">
<span class="oi oi-home"></span>
</NavLink>
</div>
<div class="nav-item d-inline-flex">
<NavLink class="nav-link text-center" href="search">
<span class="oi oi-magnifying-glass"></span>
</NavLink>
</div>
<div class="nav-item d-inline-flex">
<NavLink class="nav-link text-center" href="post">
<span class="oi oi-plus"></span>
</NavLink>
</div>
<div class="nav-item d-inline-flex">
<NavLink class="nav-link text-center" href="learn">
<span class="oi oi-bolt"></span>
</NavLink>
</div>
<div class="nav-item d-inline-flex">
<NavLink class="nav-link text-center" href="book">
<span class="oi oi-book"></span>
</NavLink>
</div>
</div>
</nav>
The project is using Bootstrap 5. The fixed-bottom tag does not seem to do anything (on iOS) as I understand it should. I have also tried putting this snippet directly in the MainLayout.razor in its own div and assigning the CSS properties manually, with little effect. I am familiar with the concept of safe-areas in iOS, but I have not been able to find a working solution to this problem.
Is there some property I am unaware of that allows you to properly assign something to the bottom of the screen?
I have tried using CSS to style the component with:
.mynav {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
}
with little effect. I also looked into webkit safe areas and The default project uses safe areas to prevent rendering overtop of things like the clock and such at the top of the screen, but I do not see any similar attribute to be causing this on the bottom.

Answer 1

It seems that the distance is due to the safearea in iOS. You could set safearea for iOS platform. Add the following code in your MainPage.xaml:
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
....
BackgroundColor="{DynamicResource PageBackgroundColor}"
xmlns:ios="clr-namespace:Microsoft.Maui.Controls.PlatformConfiguration.iOSSpecific;assembly=Microsoft.Maui.Controls"
ios:Page.UseSafeArea="True">
This reduce much of the distance from the bottom.
Hope my answer could help you.