[Bug] [iOS] TabbedPage is not rendered correctly and it breaks after rotating the device

[fexxdev]

Description

On iOS (15.0), while navigating to a TabbedPage using Shell.GoToAsync, there is a bug that causes the TabBar to be render incorrectly after being rotated from portrait to landscape and back.
Also the tab bar color is also rendered incorrectly. In the gif below you can see that the iOS 14.5 device (right) has got a translucent, white-ish background. On the other hand, the iOS 15.0 device (left) has a completely red background.

Steps to Reproduce

1. Open the sample app in a device or emulator
2. Click the "Go to Tabpage" button
3. Rotate the device 4 times (standard portrait, landscape, reversed portrait, reversed landscape, standard portrait again)

Expected Behavior

There's no space between device bottom frame and application tabbar. Also, the tab bar is colored in white-ish translucent background.

Actual Behavior

There's a gap between the device bottom frame and the application tabbar. Also, the tab bar is completely red.

Basic Information

• Version with issue: XF 5.0.0.2125, 5.0.0.2196
• Last known good version: -
• Platform Target Frameworks:
  • iOS: 15.0

Environment

Show/Hide Visual Studio info

Microsoft Visual Studio Community 2019
Versione 16.11.5
VisualStudio.16.Release/16.11.5+31729.503
Microsoft .NET Framework
Versione 4.8.04084

Edizione installata: Community

Visual C++ 2019   00435-60000-00000-AA296
Microsoft Visual C++ 2019

.NET Core Debugging with WSL   1.0
.NET Core Debugging with WSL

Adattatore di test per Boost.Test   1.0
Consente di usare gli strumenti di test di Visual Studio con unit test scritti per Boost.Test. Le condizioni d'uso e le comunicazioni relative a terze parti sono disponibili nella directory di installazione dell'estensione.

AlkampferVsix   1.0
Simple package with some utilities

ASP.NET and Web Tools 2019   16.11.75.64347
ASP.NET and Web Tools 2019

ASP.NET Web Frameworks and Tools 2019   16.11.75.64347
Per altre informazioni, vedere https://www.asp.net/

Azure Functions and Web Jobs Tools   16.11.75.64347
Azure Functions and Web Jobs Tools

Estensione IntelliCode   1.0
Informazioni dettagliate sull'estensione IntelliCode di Visual Studio

Estensioni per Strumenti contenitore di Visual Studio   1.0
Consente di visualizzare, gestire ed eseguire la diagnosi dei contenitori all'interno di Visual Studio.

Extensibility Message Bus   1.2.6 (master@34d6af2)
Provides common messaging-based MEF services for loosely coupled Visual Studio extension components communication and integration.

Gestione pacchetti NuGet   5.11.0
Gestione pacchetti NuGet in Visual Studio. Per altre informazioni su NuGet, visitare il sito Web https://docs.nuget.org/

Microsoft JVM Debugger   1.0
Provides support for connecting the Visual Studio debugger to JDWP compatible Java Virtual Machines

Microsoft MI-Based Debugger   1.0
Provides support for connecting Visual Studio to MI compatible debuggers

Microsoft Visual Studio Tools per contenitori   1.2
Consente di sviluppare, eseguire e convalidare applicazioni ASP.NET Core nell'ambiente di destinazione. Premere F5 per modificare l'applicazione direttamente in un contenitore senza debug oppure CTRL+F5 per modificare e aggiornare l'app senza ricompilare il contenitore.

Mono Debugging for Visual Studio   16.10.15 (552afdf)
Support for debugging Mono processes with Visual Studio.

Pacchetto di Microsoft Visual Studio VC   1.0
Pacchetto di Microsoft Visual Studio VC

Pacchetto host dell'adattatore di debug di Visual Studio Code   1.0
Livello di interoperabilità per l'hosting degli adattatori di debug di Visual Studio Code in Visual Studio

Procedure guidate di Microsoft Visual C++   1.0
Procedure guidate di Microsoft Visual C++

ProjectServicesPackage Extension   1.0
ProjectServicesPackage Visual Studio Extension Detailed Info

Razor (ASP.NET Core)   16.1.0.2122504+13c05c96ea6bdbe550bd88b0bf6cdddf8cde1725
Provides languages services for ASP.NET Core Razor.

SonarLint for Visual Studio   4.38.0.36876
SonarLint is an extension to your favorite IDE that provides on-the-fly feedback to developers on new bugs and quality issues injected into their code.

SQL Server Data Tools   16.0.62107.28140
Microsoft SQL Server Data Tools

Strumenti C#   3.11.0-4.21403.6+ae1fff344d46976624e68ae17164e0607ab68b10
Componenti di C# usati nell'IDE. A seconda del tipo e delle impostazioni del processo, è possibile che venga usata una versione diversa del compilatore.

Strumenti comuni di Azure   1.10
Fornisce servizi comuni da usare con Servizi mobili di Azure e gli strumenti di Microsoft Azure.

Strumenti del Servizio app di Azure versione 3.0.0   16.11.75.64347
Strumenti del Servizio app di Azure versione 3.0.0

Strumenti di Microsoft Azure per Visual Studio   2.9
Supporto per i progetti di Servizi cloud di Azure

Strumenti di recapito continuo Microsoft per Visual Studio   0.4
Consente di semplificare la configurazione delle pipeline Azure DevOps direttamente dall'IDE di Visual Studio.

Strumenti di Visual Basic   3.11.0-4.21403.6+ae1fff344d46976624e68ae17164e0607ab68b10
Componenti di Visual Basic usati nell'IDE. A seconda del tipo e delle impostazioni del processo, è possibile che venga usata una versione diversa del compilatore.

Strumenti TypeScript   16.0.30526.2002
Strumenti TypeScript per Microsoft Visual Studio

StylerPackage Extension   1.0
StylerPackage Visual Stuido Extension Detailed Info

Test Adapter for Google Test   1.0
Consente di usare gli strumenti di test di Visual Studio con unit test scritti per Google Test. Le condizioni d'uso e le comunicazioni relative a terze parti sono disponibili nella directory di installazione dell'estensione.

Visual F# Tools   16.11.0-beta.21322.6+488cc578cafcd261d90d748d8aaa7b8b091232dc
Microsoft Visual F# Tools

Visual Studio Tools per CMake   1.0
Visual Studio Tools per CMake

Visual Studio Tools per contenitori   1.0
Visual Studio Tools per contenitori

VisualStudio.DeviceLog   1.0
Informazioni sul pacchetto

VisualStudio.Foo   1.0
Information about my package

VisualStudio.Mac   1.0
Mac Extension for Visual Studio

Xamarin   16.11.000.190 (d16-11@2391ed9)
Estensione di Visual Studio per consentire lo sviluppo per Xamarin.iOS e Xamarin.Android.

Xamarin Designer   16.11.0.17 (remotes/origin/11e0001f0b17269345e80b58fb3adf1ba4efe2cd@11e0001f0)
Estensione di Visual Studio per abilitare gli strumenti di Xamarin Designer in Visual Studio.

Xamarin Templates   16.10.5 (355b57a)
Templates for building iOS, Android, and Windows apps with Xamarin and Xamarin.Forms.

Xamarin.Android SDK   11.4.0.5 (d16-11/7776c9f)
Xamarin.Android Reference Assemblies and MSBuild support.
    Mono: c633fe9
    Java.Interop: xamarin/java.interop/d16-11@48766c0
    ProGuard: Guardsquare/proguard/v7.0.1@912d149
    SQLite: xamarin/sqlite/3.35.4@85460d3
    Xamarin.Android Tools: xamarin/xamarin-android-tools/d16-11@683f375


Xamarin.iOS and Xamarin.Mac SDK   15.0.0.8 (0796d78dc)
Xamarin.iOS and Xamarin.Mac Reference Assemblies and MSBuild support.

Screenshots

(the lag in the gif is caused by my slow vpn connection to the mac which has the emulators running)

Reproduction Link

Repo HERE or ZIP HERE

[jfversluis]

Seeing this happening in the repro. The tabbar gets the color of the background of the page too though. Seems to have some reference to the other iOS 15 tabbar issues we've been seeing

[jfversluis]

@federicobenedetti, a PR (#14789) for this is open now, would you be able to grab the NuGet as described here and let us know if this fixes this issue? That will greatly speed up the review process.

Besides verifying if this particular issue is fixed also be sure to check other scenarios in the same area to make sure that this fix doesn't accidentally has side-effects 🙂

Thanks!

[fexxdev]

@jfversluis i've updated my reply here
Hit me up if something else is needed!!

[fexxdev]

@jfversluis hi! I've done some more testing regarding this issue, and i can show you what's the issue now:

As you can see, iOS 15 does in fact render correctly, and the fix works as intended (meaning that after rotating the device, the content is rendered as it should)!
But, on iOS 14.5 the problem now is more widespread: you can see that the first label is HIDDEN behind the shell navigation bar.
In fact, if i disable it, it will appear!

So, on iOS 14.5 everything is shifted up by default.

Reproduction repo is updated as per new screenshots!

Cheers,
Federico

[jfversluis]

@federicobenedetti would you be able to try the fix in #14877 and see if that fixes it for both scenarios?

[fexxdev]

@jfversluis yes! This does indeed fix the issue in both iOS 14 and 15! I think we can merge this no problems :)

EDIT:
See comment below

[jfversluis]

Great, I will do some more testing myself first as well :) thanks for the confirmation!

[fexxdev]

@jfversluis unfortunately i've found a bug with iOS 14.5.
Setting
UINavigationBar.Appearance.Translucent = false;
inside the iOS project AppDelegate will again trigger the same bug inside a TabbedPage as shown in the screenshot below

Do you have any hint as why translucency will trigger this bug again?
Thanks!

** EDIT **
I've update the sample app to reproduce the bug. Just deploy the app and rotate the device (ONLY on iOS 14.5).

[TrinTragula]

@federicobenedetti @jfversluis I updated my PR in order to solve this issue. Check if it's working now!

[fexxdev]

@jfversluis @TrinTragula i can confirm, with confidence, that the problem is now gone!
I've tested on both iOS 15 and 14.5, in differents layout and configurations! Everything is ok, nothing breaks.
We can, officially, close this!