[Bug] iOS NavigationBar background flickering on navigation

[beeradmoore]

Description

On iOS, the navigation bar of a navigation page will ficker when navigating. Additionally the default NaigationPage BarBackgroundColor on iOS appears different.
This only happens if the BarBackgroundColor of the NavigationPage has not been set.

I have not tested, but I believe this to have come from this commit 271e41c#diff-efa21a065745b4e261efc4bf6a5d8784R641-R643 (same for #9456)

Steps to Reproduce

From source:

1. Create a NavigationPage with a ContentPage in it.
2. Add some method to push another ContentPage onto the navigation stack.
3. Observe the flickering (tested on iPhone 11, iOS 13.3 simulator)

From repro:

1. Open project
2. Click "PushAsync"
3. Observe the flickering (tested on iPhone 11, iOS 13.3 simulator)

Expected Behavior

Navigation bar appears the same throughout navigation.

Actual Behavior

Navigation bar flickers to other colours throughout navigation. This could be translucancy changing?

Basic Information

• Version with issue: 4.5.0.356, 4.6.0.379-pre1, (EDIT: 4.6.0.772)
• Last known good version: 4.4.0.991757
• IDE: Visual Studio Community 2019 for Mac, Version 8.4.8 (build 2)
• Platform Target Frameworks:
  • iOS: 11.3.1
• Nuget Packages: Xamarin.Forms

Screenshots

Xamarin.Froms 4.4.0.991757

Xamarin.Forms 4.5.0.356

I think the gifs may be hard to see the issue, so I am also attaching the direct mp4 screen recordings.

nav_flicker.zip

Reproduction Link

Project is called MasterDetailPageNavColorTest because I originally thought this was a MasterDetailPage issue.
MasterDetailPageNavColorTest.zip

Workaround

Setting a BarBackgroundColor of the NavigaitonPage fixes this issue.

[jfversluis]

I can see this happening. It seems like it's pushed opaque and then decides to be translucent or something.

With the 4.4 version it doesn't happen but the bar always seems opaque. I think there is a platform specific for setting that as well. So that might be another workaround.

Thanks for the report and the investigation @beeradmoore that will surely help!

[jfversluis]

@beeradmoore just seeing this come in #9972
Does that help in this issue as well?

[beeradmoore]

@beeradmoore just seeing this come in #9972
Does that help in this issue as well?

That is a duplicate of #9456 I think. And it’s when investigating a fix for 9456 I found this issue we’re looking at.

[jfversluis]

Wait. I meant the PR I'm linking to :) which also seems to do something with the code that you identify as the culprit for this. Is it possible that PR will also fix this issue?

[beeradmoore]

Ah sorry, I shouldn’t github before coffee 😂

I am not sure, their samples work but they have changed the nav bar background color, and that stops the issue happening. I’d need to grab their PR locally and double check with default colours.

[michaeldimoudis]

Hi any update on this issue? Not fixed on latest stable 4.6 in my use case, and none of the workarounds work for me. As a result I can not upgrade from 4.4 to 4.5 or 4.6.

[ghost]

I agree with @michaeldimoudis : this issue (as well as #9456) makes it impossible for us to update from 4.4. to anything newer. Any update on this issue?

[beeradmoore]

This is still an issue on XF 4.6.0.772.

[Tommigun1980]

Hello. I was working with a design that would require usage of a transparent navigation bar. But it doesn't work properly as it flashes. I would really not like to change the designs in my app completely at the mercy of bugs, so is there any chance this could get fixed, or does anyone have a workaround? I don't have time to play detective all the time to try find workaround for everything so here's hoping for advice on how to prevent the flash, or a fix.

Thanks a lot!

[Tommigun1980]

Hello. Do you think this will get fixed?

Thanks.

[jsuarezruiz]

Created PR with the fix of this issue: #12835