-
Notifications
You must be signed in to change notification settings - Fork 1.9k
Description
Description
This issue can be reproduced with a simple app that displays a menu using Shell's Flyout
when the hamburger menu button is pressed.
The layout of AppShell.xaml is as follows.
<Shell
x:Class="Maui_IssueFlyout.AppShell"
xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:Maui_IssueFlyout"
Shell.FlyoutBehavior="Flyout">
<Shell.FlyoutContent>
<local:FlyoutMenu x:Name="fmMenu" MenuTapped="fmMenu_MenuTapped"/>
</Shell.FlyoutContent>
<ShellContent
Title="Home"
ContentTemplate="{DataTemplate local:MainPage}"
Route="MainPage" />
</Shell>
The layout of FlyoutMenu.xaml is as follows.
This issue will probably reproduce with any layout.
<ContentView xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:ios="clr-namespace:Microsoft.Maui.Controls.PlatformConfiguration.iOSSpecific;assembly=Microsoft.Maui.Controls"
x:Class="Maui_IssueFlyout.FlyoutMenu"
ios:Page.UseSafeArea="true">
<ScrollView Orientation="Vertical">
<StackLayout x:Name="slMenuList" Orientation="Vertical">
<BindableLayout.ItemTemplate>
<DataTemplate>
<Grid HeightRequest="60">
<Grid.GestureRecognizers>
<TapGestureRecognizer Tapped="gdMenu_Tapped" />
</Grid.GestureRecognizers>
<Label FontSize="20" Text="{Binding MenuName}" VerticalOptions="Center" HorizontalOptions="Start" />
</Grid>
</DataTemplate>
</BindableLayout.ItemTemplate>
</StackLayout>
</ScrollView>
</ContentView>
You can clearly see the problem when the theme is in light mode.
Launch the app with the screen oriented portrait. Press the hamburger menu button.
Rotate the screen from portrait to landscape with the Flyout menu displayed.
The size of the overlay displayed when displaying the Flyout menu does not change after screen rotation.
The size of the overlay remains the size it was when the screen was displayed in portrait orientation.
I expected the overlay to dynamically change size depending on the screen orientation.
Android does not have this issue.
Steps to Reproduce
The steps to reproduce are as follows.
- Launch the app uploaded to github with the device in portrait orientation on iOS
- Press the hamburger menu button
- Change the device orientation from portrait to landscape
In step 3, the overlay will be displayed at the same size as it was displayed when the screen was in portrait orientation.
Link to public reproduction project repository
https://github.com/cat0363/Maui-IssueFlyout.git
Version with bug
7.0.86
Last version that worked well
Unknown/Other
Affected platforms
iOS
Affected platform versions
iOS 16.4
Did you find any workaround?
None
Relevant log output
No response

