[Bug][iOS] Page content "goes under" bottom tabbar on iOS.

[todorspetkov]

Description

Page content goes under bottom tabbar on iOS.

Steps to Reproduce

Only on iOS (tested 14.8.1), on Android all works fine.

1. App uses Forms and Shell, specificaly Shell TabBar
2. A new page is thus visualize:
   Shell.SetTabBarIsVisible(destination , false); Shell.Current.Navigation.PushAsync(destination) is called to visualize a page
3. The new page is closed: Shell.Current.Navigation.PopAsync (false);
4. The original page content "has gone" under the tabbar.

This "hiding" the Tabbar works on Android but not on iOS. Is there a workaround of some kind?

Expected Behavior

The bottom tabbar should not cover content.

Actual Behavior

The bottom tabbar covers content. It seems (by visual inspection) that upon calling Shell.Current.Navigation.PushAsync the caller page gets redrawn (why?) and its content finishes "under" the bottom tab bar even though its constructor contains the following: On().SetUseSafeArea(true);.

Basic Information

• Version with issue: Forms 5.0.0.2337 LastXamarin.iOS 15.4.0.0
  • iOS: 11.0

Environment

Video capture

https://user-images.githubusercontent.com/20183131/155336199-2739513d-3f3f-4d0d-b02b-b9e42188fce9.mp4

Screenshots

Before

After

[AustinAHunter]

I can confirm I am also having this same issue on iOS only. It happens on both simulators and physical devices. Android seems to be just fine. Here are some screenshots. To replicate the problem create a new Shell application using tabs. Use a grid as the base container and put a button inside of the grid. Use HorizontalOptions="End" and set HeightRequest of button relatively close to the height of the tabbar. You will see on Android the button is placed right above the tabbar as expected. On iOS it will look as though the button isn't rendering at all, but if you then debug the application and set height request to something like 300, you will see the button appear, but behind the tabbar. I am assuming that @todorspetkov is probably using the same layout by using a grid as their base container given their screenshots with floating buttons.

Android:

iOS (Initial page load):

iOS (after setting NavBarIsVisible to True and back to False):

As I am testing this, to replicate you also have to set Shell.NavBarIsVisible to False on the page. It seems on iOS this property makes the page not account for the tab bar in its padding for some controls. However, if I change this property while debugging from False to True and back to False, the controls will re-locate appropriately above the tabbar.

[jgold6]

I tried to reproduce this issue, but could not (in Xamarin.Forms 5.0). Can someone supply a reproduction project?

Also, this is described as iOS only but I see Android screenshots demonstrating the issue. And the iOS screen recording does not clearly display the described issue, so a bit confused on this one.

[todorspetkov]

@jgold6 The screenshots and the video I provided in the beginning of the thread are from iOS. As you can see in lower part of the "Before" and "After" screenshots the content has gone under the bottom tab bar after a PushAsync and a PopAsync. The PushAsync adds a view that covers the whole screen (SetTabBarIsVisible(destination , false);).

[jgold6]

Sorry, the screen shots looked like they had Android status bars at first glance. (I have gotten so used to the notch on iOS)

Still a project that reproduces the issue would help since I cannot reproduce it with the steps provided.

[AustinAHunter]

TabBarBugRepro.zip

Here is a project that I have reproducing the issue. The steps I used to reproduce are:

1. Debug the project on iOS simulator or device making sure that Shell.NavBarIsVisible is set to False on Page1 in the XAML.
2. Notice that on Page1 there is a Grid as the main ContentView for the page containing a StackLayout and a Button, but the Button is not visible.
3. Adjust height of button to be something like 100 (just to see that the button is in fact rendered on the page, but behind the TabBar) and set back to original value (56).
4. While debugging, set Shell.NavBarIsVisible to True in the XAML of Page1 and notice the NavBar and Button both come in to view.
5. Set Shell.NavBarIsVisible to False once again and notice the Button stays in view.
6. Use Button to navigate to a new page and then navigate back and the button remains in view on the page.

Current workarounds are to set the iOS specific value of UseSafeArea to True, or to not hide the Navigation Bar. In the specific screenshots above that I provided from another project, that just won't suffice. The map utilizes the full screen and I would either have to have a blank space (provided by the iOS safe area) or a Navigation Bar unecessarily taking up a lot of space above the map.