Fix for First Item in CollectionView Overlaps in FlyoutPage.Flyout on iOS #29265
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
Hey there @@praveenkumarkarunanithi! 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 ✨
|
/azp run MAUI-UITests-public |
|
Azure Pipelines successfully started running 1 pipeline(s). |
jsuarezruiz
requested changes
May 2, 2025
|
|
||
| [Test] | ||
| [Category(UITestCategories.FlyoutPage)] | ||
| public void CollectionViewFirstItemShouldNotOverlapWithSafeAreaInFlyoutMenu() |
There was a problem hiding this comment.
This test is failing on iOS:
CollectionView Y position should be at least 69 to avoid overlapping with safe area
Assert.That(App.WaitForElement("CollectionView").GetRect().Y, Is.GreaterThanOrEqualTo(69))
Expected: greater than or equal to 69
But was: 54
There was a problem hiding this comment.
@jsuarezruiz , now the test case has been updated with proper assert conditions that correctly verify safe area respecting behavior on iOS devices.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Root Cause
On iOS devices with notches (iPhone X and newer), the FlyoutPage.Flyout content was rendering beneath the status bar because
PhoneFlyoutPageRendererignored safe area insets and positioned the flyout. Although individual ContentPages honor safe areas when ios:Page.UseSafeArea is true, the Flyout container did not.Description of Change
The fix checks whether the FlyoutPage implements
ISafeAreaViewand respects the safe area settings. Ifios:Page.UseSafeAreais enabled and the platform is iOS 11 or higher, the Flyout container’s frame is adjusted by shifting its Y origin to match the top safe area inset and reducing its height accordingly. This ensures that all child content, including CollectionView and other controls, render below the notch or status bar.To apply this fix effectively, developers must explicitly set
ios:Page.UseSafeArea="true"on the FlyoutPage, as theUseSafeArea propertydefaults to false for FlyoutPage.Issues Fixed
Fixes #29170
Tested the behaviour in the following platforms
Note
This issue is specific to iOS devices with notches or status bar areas.
Screenshots