Xamarin.Forms XAML renders different result on physical device

Question

So I'm trying to make a Layout in XAML that has a Top, Center (Content) and Bottom layout. The XAML Previewer in Visual Studio shows the correct thing where it fits 100% of the height, but when deployed on my physical iPhone, a small portion of the bottom is somehow not used.

What is causing this portion to not be used on physical phones?

<ContentPage.Content>
        <Grid>
            <Image Source="{StaticResource Image_Background}" Aspect="AspectFill" />

            <StackLayout>
                <!-- TOP -->
                <StackLayout VerticalOptions="Start" HeightRequest="60" BackgroundColor="{StaticResource JFGrey}">

                </StackLayout>

                <!-- CONTENT -->
                <StackLayout VerticalOptions="FillAndExpand">

                </StackLayout>

                <!-- BOTTOM -->
                <StackLayout VerticalOptions="End" HeightRequest="50" BackgroundColor="{StaticResource JFGreen}">

                </StackLayout>
            </StackLayout>
        </Grid>
    </ContentPage.Content>

Left image: XAML Previwer (It fills the entire 100% height)

Right image: Physical iPhone (Theres a small portion of the bottom which is not used at all)

Answer 1

That's the SafeArea in iPhone X and above. Where you shouldn't do something on that except the background color, because that is where the user will interact with the app to do some gesture (like exit the app by swiping up)

If you want to set the background for that SafeArea + entire page. Set the background color in the ContentPage.

But if somehow, you still want to do some UI stuff on that area, here is the answer: How to set Safe Area layout in iPhone x