Tab Bar Content Titles Trimmed After Navigating to Custom WebView in .NET MAUI iOS App
I'm encountering an issue in my .NET MAUI application on iOS where the titles in the TabBar's ShellContent are being trimmed or cropped. This issue occurs only after navigating to a page that contains a WebView (referred to as "AppWebView") and then returning to the Homepage. The problem does not appear the first time the app loads or navigates; it only happens after returning from the WebView page to the Homepage.
The issue seems specific to iOS devices, as I haven't observed it on Android. It looks like a rendering or layout problem with the Shell TabBar titles after the navigation back from the WebView. I've implemented custom Shell handlers and appearance customizations, but the issue persists.
Has anyone experienced this behavior on iOS or knows of a potential fix for this title trimming issue?
This is my Shell handler code.
public class CustomShellHandler : ShellRenderer
{
protected override IShellTabBarAppearanceTracker CreateTabBarAppearanceTracker()
=> new CustomTabBarAppearanceTracker(Element);
public class CustomTabBarAppearanceTracker : ShellTabBarAppearanceTracker
{
UIView? _tabbarlineview;
private readonly Shell _shell;
public CustomTabBarAppearanceTracker(VisualElement shell)
{
_shell = (Shell)shell;
}
public override void SetAppearance(UITabBarController controller, ShellAppearance appearance)
{
base.SetAppearance(controller, appearance);
var selectedIndex = (int)controller.SelectedIndex;
if (selectedIndex == -1)
return;
// Call the code-behind method of the Shell page
if (_shell is MainPage shellPage)
{
shellPage.OnTabTapped();
}
// Adding line above Menu item
var itemCount = controller.TabBar.Items.Length;
var topOffset = 0;
var lineHeight = 2;
var itemWidth = (int)controller.TabBar.Frame.Width / itemCount;
var leftOffset = selectedIndex * itemWidth;
if (_tabbarlineview is not null)
{
_tabbarlineview.RemoveFromSuperview();
}
_tabbarlineview = new UIView(new CGRect(leftOffset, topOffset, itemWidth, lineHeight))
{
BackgroundColor = Colors.Blue.ToPlatform()
};
controller.TabBar.AddSubview(_tabbarlineview);
}
}
}
This is my MainPage.xaml code.
<TabBar Title="TabBar">
<ShellContent
Title="Dashboard"
ContentTemplate="{DataTemplate tab:HomePage}"
Icon="tab_home"
Route="TabHomePage" />
<ShellContent
Title="Manage Cards"
ContentTemplate="{DataTemplate tab:ManageCardsPage}"
Icon="tab_manage_cards"
Route="TabManageCardsPage" />
<ShellContent
Title="Transfer Money"
ContentTemplate="{DataTemplate tab:TransfersPage}"
Icon="tab_transfers"
Route="TabTransfersPage" />
<ShellContent
Title="Shopping"
ContentTemplate="{DataTemplate tab:ShoppingPage}"
Icon="tab_shopping"
Route="TabShoppingPage" />
<ShellContent
Title="History"
ContentTemplate="{DataTemplate tab:HistoryPage}"
Icon="tab_History"
Route="TabHistoryPage" />
</TabBar>