menu in listview of flyout page keeps scrolling down on its own when i scroll up in ios devices xamarin.forms

i have created a cross platform app using xamarin.forms. the thing is everything works perfectly on android but on ios devices it doesn't. i have a flyout page with a hamburger menu and when i scroll up to reach the rest of the items that don't appear in the page, the menu scrolls back down on its own and i can't reach them as shown in the video https://1drv.ms/v/s!ApO-CpoDPS4ikkjswzAROdQfk-4E?e=Zcys6g . below is the code of the flyoutpage.xaml:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="ALNahrainAlphaApp.FlyoutPage1Flyout"
             Title="Flyout"
             IconImageSource="{x:OnPlatform iOS=hamburger.png}"
             xmlns:ios="clr-namespace:Xamarin.Forms.PlatformConfiguration.iOSSpecific;assembly=Xamarin.Forms.Core"
              ios:Page.UseSafeArea="true">
  <StackLayout>
    <ListView x:Name="MenuItemsListView"
              SeparatorVisibility="None"
              HasUnevenRows="true"
              ItemsSource="{Binding MenuItems}">
      <ListView.Header>
                <Grid BackgroundColor="#0d98ba"  Margin="0,0,0,15">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="10"/>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="10"/>
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                       
                        <RowDefinition Height="10"/>
                        <RowDefinition Height="*"/>
                        <RowDefinition Height="10"/>
                    </Grid.RowDefinitions>
                    <StackLayout Orientation="Vertical"  Grid.Column="1"
              Grid.Row="1">

                        <Frame CornerRadius="50" HeightRequest="100" WidthRequest="100" HorizontalOptions="Center" VerticalOptions="Center"  Padding="-1"  BorderColor="Black" IsClippedToBounds="True"  >
                            <Image HeightRequest="150" WidthRequest="150" x:Name="alNahrainLogo"  HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"/>
                        </Frame>

                    <Label
             VerticalOptions="Center"
             HorizontalOptions="Center"
              Text="Al Nahrain - App"
              TextColor="Black"
              FontFamily="audiofont"
                        Margin="20"
              Style="{DynamicResource SubtitleStyle}
              "/>
                    </StackLayout>
                </Grid>
      </ListView.Header>
      <ListView.ItemTemplate>
        <DataTemplate>
          <ViewCell>
                        <StackLayout Padding="10,10" HorizontalOptions="FillAndExpand">
                            <StackLayout Orientation="Horizontal">
                                <Image HeightRequest="20" Source="{Binding icon}" WidthRequest="20" />

                                <Label VerticalOptions="FillAndExpand" 
                    VerticalTextAlignment="Center" 
                    Text="{Binding Title}" 
                    FontSize="15"
                     FontAttributes="Bold"
                     TextColor="Black"
                     />
                            </StackLayout>

                            <BoxView HeightRequest="1" Color="Black" Margin="0,12,10,0"/>
                        </StackLayout>
                    </ViewCell>
        </DataTemplate>
      </ListView.ItemTemplate>
    </ListView>
  </StackLayout>
</ContentPage>

why is this happening? thanks in advance