[iOS 26] Fix tab bar ghosting when navigating from modal to tabbed Shell content#34254
[iOS 26] Fix tab bar ghosting when navigating from modal to tabbed Shell content#34254SubhikshaSf4851 wants to merge 3 commits intodotnet:mainfrom
Conversation
|
Hey there @@SubhikshaSf4851! Thank you so much for your PR! Someone from the team will get assigned to your PR shortly and we'll get it reviewed. |
dotnet-policy-service
bot
added
community ✨
karthikraja-arumugam
added
area-controls-shell
|
🚀 Dogfood this PR with:
curl -fsSL https://raw.githubusercontent.com/dotnet/maui/main/eng/scripts/get-maui-pr.sh | bash -s -- 34254Or
iex "& { $(irm https://raw.githubusercontent.com/dotnet/maui/main/eng/scripts/get-maui-pr.ps1) } 34254" |
|
/azp run maui-pr-uitests , maui-pr-devicetests |
|
Azure Pipelines successfully started running 2 pipeline(s). |
There was a problem hiding this comment.
Pull request overview
This PR fixes a tab bar ghosting issue on iOS 26 caused by the new Liquid Glass rendering system. When navigating from a modal to tabbed Shell content using GoToAsync, tab bar icons would appear missing or ghosted. The root cause is that setting newView.Alpha = 0 before the cross-fade animation in ShellItemTransition causes iOS 26 to composite the Liquid Glass tab bar icons while the parent view is at zero opacity, resulting in incorrect rendering when alpha is restored to 1.
Changes:
- Modified
ShellItemTransition.csto skip setting alpha to 0 on iOS 26+, allowing the cross-fade animation to start from the default alpha=1 - Added comprehensive UI test reproducing the modal-to-tabs navigation scenario
- Added snapshot images for iOS, iOS 26, and Android platforms
Reviewed changes
Copilot reviewed 3 out of 6 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
src/Controls/src/Core/Compatibility/Handlers/Shell/iOS/ShellItemTransition.cs |
Added iOS 26+ version check to skip setting newView.Alpha = 0, fixing Liquid Glass tab bar icon compositing issue |
src/Controls/tests/TestCases.HostApp/Issues/Issue34143.cs |
Created test host app with Shell structure: Home page → Modal → TabBar navigation flow using TestShell base class |
src/Controls/tests/TestCases.Shared.Tests/Tests/Issues/Issue34143.cs |
Added UI test verifying tab bar visibility after modal-to-tabs navigation via GoToAsync |
src/Controls/tests/TestCases.iOS.Tests/snapshots/ios/TabBarShouldBeVisibleAfterNavigatingFromModalViaGoToAsync.png |
Snapshot for iOS (pre-26) showing correct tab bar rendering |
src/Controls/tests/TestCases.iOS.Tests/snapshots/ios-26/TabBarShouldBeVisibleAfterNavigatingFromModalViaGoToAsync.png |
Snapshot for iOS 26+ showing correct Liquid Glass tab bar rendering |
src/Controls/tests/TestCases.Android.Tests/snapshots/android/TabBarShouldBeVisibleAfterNavigatingFromModalViaGoToAsync.png |
Snapshot for Android showing tab bar baseline (not affected by iOS 26 issue) |
| // tab bar icons to composite while the parent view has zero alpha, resulting in | ||
| // icons not rendering. Skip setting alpha to 0 so | ||
| // the tab bar view stays at its default alpha=1 when iOS 26 composites its icons. | ||
| if (!OperatingSystem.IsIOSVersionAtLeast(26)) |
There was a problem hiding this comment.
MacCatalyst version check is missing. Based on the codebase pattern (see NavigationRenderer.cs:1621, ShellPageRendererTracker.cs:291, etc.), iOS 26+ version checks should also include MacCatalyst 26+ to ensure consistent behavior across Apple platforms. The Liquid Glass tab bar rendering issue likely affects MacCatalyst as well.
Add the MacCatalyst check to match the established pattern:
if (!OperatingSystem.IsIOSVersionAtLeast(26) && !OperatingSystem.IsMacCatalystVersionAtLeast(26))| if (!OperatingSystem.IsIOSVersionAtLeast(26)) | |
| if (!OperatingSystem.IsIOSVersionAtLeast(26) && !OperatingSystem.IsMacCatalystVersionAtLeast(26)) |
Note
Are you waiting for the changes in this PR to be merged?
It would be very helpful if you could test the resulting artifacts from this PR and let us know in a comment if this change resolves your issue. Thank you!
Root Cause
iOS 26 introduced the Liquid Glass rendering system for the tab bar. In
ShellItemTransition, settingnewView.Alpha = 0before the cross-fade animation causes iOS 26 to composite the Liquid Glass tab bar icons while the parent view is at zero opacity. When the animation restoresalpha = 1, the glass pill appears with the selected tab icon missing because the Liquid Glass layer already cached its content at zero opacity.Description of Change
ShellItemTransition.csto skip settingnewView.Alpha = 0on iOS 26+, preventingLiquid Glass tab bar icons from being composited while the parent view is transparent.
alpha = 1),so the visual transition is preserved.
using System;directive required forOperatingSystem.IsIOSVersionAtLeast(26).Test coverage for the regression:
TestCases.HostApp(Issue34143.cs) that reproduces the navigation scenario and ensures the tab bar renders correctly after navigating from a modal.TestCases.Shared.Tests/Tests/Issues/Issue34143.cs) to automate validation that the tab bar is visible and interactable after the specific navigation flow, preventing regressions.Issues Fixed
Fixes #34143
Tested the behaviour in the following platforms
Screenshot