Xamarin.forms: Flicker when changing Detail page in Master-Detail

[wjax]

Description

There is a nasty flicker when replacing the Detail page of a Master-Detail.
When the user opens the master side to select a different Detail page, the Detail page replacement generates a flicker and the user can see previous selected page disappearing and the new one appearing.

Steps to Reproduce

1. Create a new Cross-platform xamaring forms Project in Visual Studio 2017 with Android and iOS and Master-Detail Template
2. Run Android App and select between Browse and About pages.

Expected Behavior

Detail page replacement should be smooth and animated. Navigation bar should not flicker

Actual Behavior

Basic Information

• Version with issue: Last Xamarin Forms 3.4
• Last known good version:
• IDE: Visual Studio 2017
• Platform Target Frameworks:
  
  
  
  • iOS:
  
  
  • Android: 8.0
  
  
  • UWP:
  
  
• Android Support Library Version:
• Nuget Packages:
• Affected Devices:

Screenshots

Reproduction Link

[kingces95]

See https://github.com/xamarin/Xamarin.Forms/issues/4400

[kingces95]

There is a flicker. Not sure if it's nasty.

[vjsystematix]

Add some delay like this
await Task.Delay(300);
Detail = new NavigationPage(new YourPage());

It's working fine in my application

[asdiomar1]

We shouldn't have to delay navigation to "solve" this problem

[angelru]

The same issue

[hhuseyinpay]

When the page to be opened becomes complex, the flicker increasing

[Srki94]

I'm having an issue with this as well. Setting the Detail of the MasterPage causes white screen to show up before the new page shows up. This takes about 1 second.
We're scheduled to release for mid May and we really need a solution. Any kind of help is welcome.

[taublast]

Any update on this? Thoses Xamarin samples and VS templates with white screens don't let people see this problem is really huge. When you start working on an app with non-white backgrounds, this flicker on every mainpage change is just killing.

[taublast]

If one set detail at the same thread as closing the flyout we get the freezing lag and the gray "99000000" background behind flyout. If you try to make it smooth and set detail after the flyout is closed here's what is happening (White blink, it is drawn even before the new NavigationPage assigned to detail renderer OnElementChanged is called. So background colors for NavigationPage and Page inside do not act yet. MasterDetailPage BackgroundColor not in charge either):

            //processing menu click

            Device.StartTimer(TimeSpan.FromSeconds(1), () =>
            {                
                    //set detail page by type
                    SetDetail(item.TargetType);            

                return false;
            });

            //close flyout
            App.ShowMenu(false);
            if (App.Current.IsAndroid)
                await Task.Delay(100);

[Srki94]

We used a temporary workaround suggested by Microsoft Support in our project.
The workaround is based on using MessagingCenter to control the Content of the MainPage with the Flyout Menu.

It required changing all our pages to Views and setting those Views as Content of the MainPage based on what user taps on in the menu.

If this is applicable in your case, it might save your day until the issue gets fixed.

[taublast]

@Srki94 Hi, thanks mate, just found a workaround, just set the default color for your page in android styles. This way the flicker is reduced, i'd say it becomes unnoticeable if your resulting pages have solid backgroud color, and less noticable for thoses with images as background etc.
Oh well, for black pages i have set in styles.xml:

  <!-- Base theme applied no matter what API -->
  <style name="MainTheme.Base" parent="Theme.AppCompat.Light.DarkActionBar">
       ...
    <!--default page color - avoid flicker here !!!-->
    <item name="android:windowBackground">@color/colorDefault</item>

  </style>

colors.xml:

<?xml version="1.0" encoding="utf-8"?>
<resources>
   ...
  <color name="colorDefault">#000000</color>
</resources>

[Taylor365]

Any update on this?

[baneageorge]

I do have this on XF 4.5.0.617 and happens only on iOS and only on some pages... any solution or idea that might cause it????

[giuseppenovielli]

@samhouts me too, when click to DetailPage MasterDetail Flicker, before close, also in Release Mode! 😔

[giuseppenovielli]

@samhouts please prioritize this issue, into Xamarin.Forms 5, i have a master-detail app, i use also Prism, but when change the detail page, the switch lagging, with the animation of close master-detail.

WHY A SIMPLY PAGE'S CHANGED IS LAGGING??

Description

There is a nasty flicker when replacing the Detail page of a Master-Detail.
When the user opens the master side to select a different Detail page, the Detail page replacement generates a flicker and the user can see previous selected page disappearing and the new one appearing.

Thanks for all your work!!