Flickering when calling Navigation.PopAsync(false).

[cat0363]

Discussed in https://github.com/dotnet/maui/discussions/13809

^{Originally posted by cat0363 March 10, 2023} The layout of the page is as follows. Page1 layout:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="NavigationTest.Page1" 
             NavigationPage.HasNavigationBar="False" BackgroundColor="Red">  
    <Grid RowDefinitions="44,44,44,44,44,44,*" RowSpacing="0">
        <Button Grid.Row="0" Text="Next" BackgroundColor="Blue" TextColor="White" Clicked="Button_Clicked" />
        <Button Grid.Row="1" Text="Next" BackgroundColor="Blue" TextColor="White" Clicked="Button_Clicked" />
        <Button Grid.Row="2" Text="Next" BackgroundColor="Blue" TextColor="White" Clicked="Button_Clicked" />
        <Button Grid.Row="3" Text="Next" BackgroundColor="Blue" TextColor="White" Clicked="Button_Clicked" />
        <Button Grid.Row="4" Text="Next" BackgroundColor="Blue" TextColor="White" Clicked="Button_Clicked" />
        <Button Grid.Row="5" Text="Next" BackgroundColor="Blue" TextColor="White" Clicked="Button_Clicked" />
    </Grid>
</ContentPage>

Page2 layout:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="NavigationTest.Page2"
             NavigationPage.HasNavigationBar="False" BackgroundColor="White">   
    <Grid RowDefinitions="44,44,44,44,44,44,*" RowSpacing="0">
        <Button Grid.Row="0" Text="Back" BackgroundColor="Blue" TextColor="White" Clicked="Button_Clicked" />
        <Button Grid.Row="1" Text="Back" BackgroundColor="Blue" TextColor="White" Clicked="Button_Clicked" />
        <Button Grid.Row="2" Text="Back" BackgroundColor="Blue" TextColor="White" Clicked="Button_Clicked" />
        <Button Grid.Row="3" Text="Back" BackgroundColor="Blue" TextColor="White" Clicked="Button_Clicked" />
        <Button Grid.Row="4" Text="Back" BackgroundColor="Blue" TextColor="White" Clicked="Button_Clicked" />
        <Button Grid.Row="5" Text="Back" BackgroundColor="Blue" TextColor="White" Clicked="Button_Clicked" />
    </Grid>
</ContentPage>

Button_Click event on Page1:

private async void Button_Clicked(object sender, EventArgs e) 
{
	await Navigation.PushAsync(new Page2(), false);
}

Button_Click event on Page2:

private async void Button_Clicked(object sender, EventArgs e) 
{
    await Navigation.PopAsync(false);
}

After using NavigationPage to transition from Page1 to Page2, return from Page2 to Page1. Flickering occurs when returning from Page2 to Page1.

I tried transitioning using the same layout in Xamarin.Forms and .NET MAUI. The video was tested on Android. (As for iOS, the build environment has not been prepared, so it cannot be verified.)

[Xamarin.Forms]

https://user-images.githubusercontent.com/125236133/224205354-5d3d65be-7f40-4bbc-88e3-e0ea27ed73c7.mp4

[.NET MAUI]

https://user-images.githubusercontent.com/125236133/224205389-cf666a1a-59b2-47dc-8702-a4788f2a2bee.mp4

No flickering in Xamarin.Forms but flickering in .NET MAUI.

This flickering makes users feel uncomfortable. I would like to reduce this flickering if possible. Any good ideas? Thank you.

[cat0363]

I have uploaded the code for this issue to github. https://github.com/cat0363/Maui-Issue13810

[cat0363]

This problem does not occur if you use Shell as follows.

[App.xaml.cs]

public App()
{
    InitializeComponent();

    MainPage = new AppShell();
}

[Page1.xaml.cs]

private async void Button_Clicked(object sender, EventArgs e)
{
    await Shell.Current.Navigation.PushAsync(new Page2(), false);
}

[Page2.xaml.cs]

private async void Button_Clicked(object sender, EventArgs e)
{
    await Shell.Current.Navigation.PopAsync(false);
}

https://user-images.githubusercontent.com/125236133/228122165-4763991a-43ce-4284-999a-eef2bd3ff99d.mp4

Since there is no problem with Shell, it is a problem only with NavigationPage. From the above, there is no problem with Shell's Navigation. Since changing from NavigationPage to Shell involves a significant change, I hope that this problem will be resolved.

[SagarPanwala]

At first glance, issue seems minor, but it's major if you have your page background color to something else than white. In your sample, for page2 I set BackgroundColor to Pink, so on pop from page2, app shows pink color for a 1-2 seconds.

[homeyf]

Verified this issue with Visual Studio Enterprise 17.7.0 Preview 1.0. Can repro on android platform with sample project. https://github.com/cat0363/Maui-Issue13810

[evgenyKozlov1996]

Verified this issue with Visual Studio 17.7.5. Repro on Android platform.

[matmork]

I am also experiencing this on Android, iOS is fine. Not using shell. Disabling animation while navigating seems to work in my case, but its not as nice.

Got the idea from https://github.com/xamarin/Xamarin.Forms/issues/8581#issuecomment-557104526

[maratoss]

Is there any workaround?