Xamarin.forms: [Bug] Shell application flickering on back navigation

[RsZoli]

Description

The navigation animation is flickering, briefly displaying a black screen when navigating back in a Shell application.

Steps to Reproduce

Navigate back.

Expected Behavior

Don't flicker.

Actual Behavior

Flickering.

Basic Information

• Version with issue:
• Last known good version:
• IDE: VS 2019 16.3.9
• Platform Target Frameworks:
  
  
  
  • iOS: n/a
  
  
  • Android: 9.0
  
  
  • UWP: n/a
  
  
• Android Support Library Version:
• Nuget Packages:
• Affected Devices: Samsung Galaxy S8, S10

Screenshots

Slow motion video of the issue: https://i.imgur.com/bWAVzgY.mp4

Reproduction Link

[RsZoli]

A temporary workaround, if you do an override, without animation there is no flickering!

protected override bool OnBackButtonPressed() {Current.Navigation.PopAsync(false); return true;}

[jfversluis]

Hey @z07713! Thanks for report and adding the video as well as a workaround! Great job 😄

Would you by any chance also be able to put together a small reproduction project to rule out that this is caused by any other code than simply navigating?

Also, did you try this on iOS and see the same thing? Or not tried on iOS?

Thanks!

[RsZoli]

Hey @z07713! Thanks for report and adding the video as well as a workaround! Great job 😄

Would you by any chance also be able to put together a small reproduction project to rule out that this is caused by any other code than simply navigating?

Also, did you try this on iOS and see the same thing? Or not tried on iOS?

Thanks!

Hey @jfversluis , thank you for the reply, here is the repro you have asked for: https://drive.google.com/open?id=1WkGh6QwTOP380gX4RrRsksSGBoJNWeuc

Also, i have not tried this on IOS nor i have the ability to do so, i don't own a Mac.

[jfversluis]

Awesome, thanks @z07713 !

Definitely see this happening, thanks for the repro.

[djsleurink]

It might be worth noting that the workaround
protected override bool OnBackButtonPressed() {Current.Navigation.PopAsync(false); return true;}
Only works when applied inside the code behind of the AppShell.xaml and does not work when placed on seperate pages. I think this relates to 7072

[lukazh]

As a workground, overriding the OnPopAsync of ShellSection to disable animation might be more targeted.

public class CustomShellSection : ShellSection
{
    protected override Task<Page> OnPopAsync(bool animated)
    {
        return base.OnPopAsync(false); // ignore the parameter
    }
}

[jonx]

@jfversluis for me this seems to be working correctly on iOS (13.3).

Disabling the animation is not an option for us and we were just finalizing our release. We will have to rollback to 4.3 which is bad as it will reopen some bugs mostly in shell and the carousel.

We will probably have to disable some features and release without them which is sad given how long we worked on them.

Is there any workaround besides disabling animation?

Any chance this gets solved before Jan 16? Would be awesome. Thanks.

Note, the PopModal animation does not have the issue.

[jfversluis]

Sorry to hear that @jonx. Even if we were to fix it before Jan 16, it's unlikely that it will be part of a NuGet we release before then. If this is something that blocks your release I wouldn't bet on that option. Sorry about that.

[jonx]

It's okay @jfversluis, I understand, thanks for your comment. We'll just have to delay our release.
@z07713 is there a way for you to share your sample again, I can't access your links anymore. I'd like to see if it's really the same problem then I have because for me, I can briefly see appear another screen of my app instead of a black screen (it's in the context of a wizard; when I pop the current page, I see the first page of my wizard briefly). Thanks.
@jfversluis would you have an idea of what change in 4.4 introduced this problem? I'd like to see if there is a way to temporarily work around the problem. Thanks.

[jonx]

I downgraded to 4.3.991250 and I actually still have the issue, just a little less obvious (because it's faster - quicker, I suppose). I'll do more tests if @z07713 can share his example...

[RsZoli]

@jonx there you go: https://drive.google.com/open?id=19apVlQS0TafFeBT16aCfzvtvCwcweVgS

also, it has 4.3.0.991211 Forms installed :/

[tmuskopf]

I am having this issue as well. I have tried putting the line:
protected override bool OnBackButtonPressed() { Current.Navigation.PopAsync(false); return true; }
in my appShell.xaml.cs and the Flashing is still present. If someone could help me understand the work around... That would be awesome!

[larsduewel]

We do have the same issue as well, its quite annoying, if you want to use the shell with animations. :|

[AndreasLichtsinn]

I have the same issue also, and also the workaround didn't work for me. I got the feedback from the users that this looks pretty nasty, so we will have to delay rollout of our app until this is fixed.

[alex-relov]

when will the error be fixed?

[dktechindia]

I am facing same issue in Windows UWP when Navigating to Content Page using Navigation.PushAsyc(<Page Object>,false)

Any workaround for it?

[RsZoli]

@jfversluis any update on this?

[jfversluis]

@z07713 I'm afraid not yet, sorry! Did you uncover any new findings about this by any chance that might help us?

[ymebrugts]

So the Xamarin team lets a flickering issue that absolutely destroys UX be in the repo for months. This is insane to me. Currently facing this problem and I regret not going native because I'm getting a headache navigating my own app.

[AndreasLichtsinn]

@jfversluis I did some tests, hope this helps you guys out for finding the bug:

For reproduction I used the standard Visual Studio Template which uses Xamarin Forms 4.3.0.908675
I did no changes to the code. No flickering in the standard template app.

After that, I upgraded the Xamarin Forms package to 4.3.0.947036
No changes to the code. The flickering appears not in Emulator, only on a real Android device (in my case Samsung Galaxy A40), it also doesn't appear on iOS Simulator or iPhone 8.

So there must be a change between these two versions that causes the flickering.

[ahmedalejo]

Awesome! @AndreasLichtsinn

[RsZoli]

@jfversluis The only thing worth to mention is, that we completely stopped using shell because of this :/

[jfversluis]

Thanks for your investigation on this @AndreasLichtsinn! Very valuable information :)

[KevinHu-au]

One more thing I found for the blink issue.
When I create a Shell app with the template, if I change the navigation (in the code behind of the ItemsPage ) from "Navigation.PushAsync(new ItemDetailPage())" to "Shell.Current.GoToAsync("itemDetailPage", false)", then I will see the blink on Android device. I have checked this on the original 4.3.xxx and the latest 4.5.xxx versions of Xamarin.Forms.

To be really honest, although there are a few navigation problems of Shell navigation (like the only Page to Page navigation, the Parameter pass etc...), this bug is actually blocking my release, and it will make Shell is compeletly unuseable. So please fix the bug as soon as possible!!!

[RamiroGuasti]

Good morning, I have the same problems described above. I would like to know if there is any solution in sight?

[kevinjpetersen]

Same issues here. Disabling the animation I don't really see as a work around, especially since there's no easy way to do so with the Back Button Pop.

I hope this will be fixed fast!

[tdamir]

I can confirm that there is no blink in version 4.3.0.90867.

[kevinjpetersen]

Didn't test the version above, however the issue is still persistent in version 4.5.0.356

[RamiroGuasti]

The issue is still persistent in last stable version.

[ahmedalejo]

Same issues here. Disabling the animation I don't really see as a work around, especially since there's no easy way to do so with the Back Button Pop.

I hope this will be fixed fast!

@kevinjpetersen this will only happen if you are able to fix it asap. It´s been open since mid november last year.

your best fast! fix is to tryout @tdamir findings with v4.3.0.90867.

[tdamir]

Some more info: the bug is introduced in this commit: https://github.com/xamarin/Xamarin.Forms/commit/2b4ccdc88f8db7a2a0b78a1adf3428125eb677b5

It looks like if I comment out this line:
https://github.com/xamarin/Xamarin.Forms/blob/1532d46f5fb6f219594015b80f8e5a2476512882/Xamarin.Forms.Core/Shell/ShellSection.cs#L499
then there is no blink.

Somebody could look into this who has more experience than me...

I debugged this and if I first remove the page and then call the navigation, then it will be okay - no blink.

So here: https://github.com/xamarin/Xamarin.Forms/blob/1532d46f5fb6f219594015b80f8e5a2476512882/Xamarin.Forms.Core/Shell/ShellSection.cs#L600

Change this:

            _navigationRequested?.Invoke(this, args);
            if (args.Task != null)
                await args.Task;
            RemovePage(page);

to this:

            RemovePage(page);
            _navigationRequested?.Invoke(this, args);
            if (args.Task != null)
                await args.Task;

[ahmedalejo]

@tdamir very good find!

[ahmedalejo]

Giving your finding is accurate @tdamir, the problem would be when args.Task is awaited probably caused due to context switching from UI-Thread-UI.

The task is always awaited

https://github.com/xamarin/Xamarin.Forms/blob/7a52542d50797ccc69ae1d8dd84259190d96bdb4/Xamarin.Forms.Platform.Android/Renderers/ShellItemRendererBase.cs#L302

even though on android the args.Task in this method is always a Task.FromResult(...)
https://github.com/xamarin/Xamarin.Forms/blob/7a52542d50797ccc69ae1d8dd84259190d96bdb4/Xamarin.Forms.Platform.Android/Renderers/ShellItemRendererBase.cs#L134
but think a found the more probable culprit
https://github.com/xamarin/Xamarin.Forms/blob/7a52542d50797ccc69ae1d8dd84259190d96bdb4/Xamarin.Forms.Platform.Android/Renderers/ShellItemRendererBase.cs#L252-L259

it´s changing the background color upon navigation(not sure if always)! why?

It also seems that the blink only occurs when within a tab.

Lots of testing to do.

[jfversluis]

Great work @tdamir and @ahmedalejo! :)

[kevinjpetersen]

@ahmedalejo Cool fidings! Just want to put this out there, that I don't think it's only tabs. I have the same flickering, and all I have is this in my AppShell (aka. no TabBar):

<?xml version="1.0" encoding="UTF-8"?>
<Shell xmlns="http://xamarin.com/schemas/2014/forms" 
       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
       xmlns:d="http://xamarin.com/schemas/2014/forms/design"
       xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
       xmlns:views="clr-namespace:MyApp.Views"
       mc:Ignorable="d"
       Title="MyApp"
       Visual="Material"
       Shell.BackgroundColor="{StaticResource JFBlack}"
       Shell.TitleColor="{StaticResource JFWhite}"
       Shell.ForegroundColor="{StaticResource JFWhite}"
       FlyoutBehavior="Disabled"
       Shell.TabBarIsVisible="False"
       x:Class="MyApp.AppShell">

    <ShellContent Route="login">
        <views:LoginPage />
    </ShellContent>
    <ShellContent Route="overview">
        <views:OverviewPage />
    </ShellContent>

</Shell>

[tdamir]

@ahmedalejo Yeah, the color change part is weird but if I remove it, it still blinks.

It looks like https://github.com/xamarin/Xamarin.Forms/blob/1532d46f5fb6f219594015b80f8e5a2476512882/Xamarin.Forms.Core/Shell/ShellSection.cs#L499 must be called before navigating.

[ahmedalejo]

Hi @PureWeen and @rmarinho

would you have an idea why calling SendAppearanceChange() below
https://github.com/xamarin/Xamarin.Forms/blob/1532d46f5fb6f219594015b80f8e5a2476512882/Xamarin.Forms.Core/Shell/ShellSection.cs#L499

causes poping to blink?

[pfedotovsky]

Could someone advise on a workaround?

The solution with

protected override bool OnBackButtonPressed() 
{
  Current.Navigation.PopAsync(false); return true;
}

is not working.

[pfedotovsky]

I've found the workaround (thanks to https://github.com/xamarin/Xamarin.Forms/issues/8581#issuecomment-569583965)

    public class CustomTab : Tab
    {
        protected override Task<Page> OnPopAsync(bool animated)
        {
            // temporary workaround while https://github.com/xamarin/Xamarin.Forms/issues/8581 not fixed
            return base.OnPopAsync(animated: false); 
        }
    }

And then use the CustomTab in XAML.

The fix below only works with hardware back button navigation (and not working in other back navigation cases):

protected override bool OnBackButtonPressed() 
{
  Current.Navigation.PopAsync(false); return true;
}

[ahmedalejo]

Thanks @pfedotovsky i had a hunch it might have to do with tab navigation as well.

[lazmeister]

Happening to us as well, since 4.3 the flicker has been around on Android.

[ahmedalejo]

Just discovered this bug is on it´s one year anniversary [Shell] navigation - flickering #5755

[angelru]

The same issue here when goback, flickering screen.

For example:
https://github.com/mallibone/ShellLoginSample

[PureWeen]

Thank you for the exploration @ahmedalejo it made this one super easy to track down and fix

https://github.com/xamarin/Xamarin.Forms/pull/10158

[PureWeen]

Once the build is done if anyone wants to test the nugets and let me know if the issue is resolved that would be helpful

https://dev.azure.com/xamarin/public/_build/results?buildId=16155&view=results

[PureWeen]

I tested the nuget with the xaminals sample

https://github.com/xamarin/Xamarin.Forms/issues/6294

And with this nuget the flickering no longer occurs

[AndreasLichtsinn]

@PureWeen Ok so I did a test:

I created a new Shell Sample App with Xamarin Forms 4.3.0.908675 -> No flickering
Then I updated to latest stable 4.5.0.495 -> Flickering
Then I updated to your newest release 4.6.0.1693 -> No flickering

Great work! Hope others will be able to confirm this.

[angelru]

@PureWeen Ok so I did a test:

I created a new Shell Sample App with Xamarin Forms 4.3.0.908675 -> No flickering
Then I updated to latest stable 4.5.0.495 -> Flickering
Then I updated to your newest release 4.6.0.1693 -> No flickering

Great work! Hope others will be able to confirm this.

@AndreasLichtsinn can't find Xamarin Forms 4.6.0.1693

[RsZoli]

@PureWeen Ok so I did a test:

I created a new Shell Sample App with Xamarin Forms 4.3.0.908675 -> No flickering
Then I updated to latest stable 4.5.0.495 -> Flickering
Then I updated to your newest release 4.6.0.1693 -> No flickering

Great work! Hope others will be able to confirm this.

@AndreasLichtsinn i can't find the 1693 build either! Also, the 4.7.0.531-nightly still flickers :/

[AndreasLichtsinn]

@angelru @RsZoli It's in the published artifacts that PureWeen posted

[PureWeen]

@angelru Thank you for testing!!!!

[angelru]

@angelru Thank you for testing!!!!

@PureWeen I couldn't test, I can't download

[PureWeen]

Oh you were quoting @AndreasLichtsinn :-)

Thank you @AndreasLichtsinn for testing!!!

[AndreasLichtsinn]

@angelru
Go to link:
https://dev.azure.com/xamarin/public/_build/results?buildId=16155&view=results
Click here:

Then here:

Then unpack the zip and create a local nuget package source to this folder:

Then choose this local package source and install it from there:

[angelru]

@angelru
Go to link:
https://dev.azure.com/xamarin/public/_build/results?buildId=16155&view=results
Click here:

Then here:

Then unpack the zip and create a local nuget package source to this folder:

Then choose this local package source and install it from there:

Thanks a lot!!! it works!

[tdamir]

I can confirm that there is no flicker in Xamarin Forms 4.6.0.1693.

Thanks!

[samhouts]

closed by #10158

[baneageorge]

I have the same issue with the latest Xamarin forms 4.8. I identified that on iOS the pages that have labels with TextType='Html' causes the issue...

I opened a new issue. #12385