White area on bottom of screen on iOS with viewport-fit=cover

I am having problems getting the app to scale properly on iOS-devices that have the “notch” at the top.

In order to fill the whole screen, one should use viewport-fit=cover (according to the guides). However, if making an empty app with viewport-fit=cover, an empty white area shows up at the bottom. It seems that the app height does not scale to the full height of the screen:

(I’ve changed the body background color to yellow to illustrate the white area).

If closing the app and opening it again, the height seems to be recalculated and the problem is gone:

If adding the css body{ padding-top: env(safe-area-inset-top); } the content gets pushed down a bit, but there is still a white area at the bottom that I am not able to remove (also, the header is still too far up, I believe):

This problem seems to be somewhat common (outside Trigger apps), and some google results indicate that this is a bug in wkwebview. A suggested solution that show up on google is to set “height: 100vh” on body or the first element inside body. This seems to solve the problem (visually), but I then run into other problems, e.g. that the app height is actually too large, pushing things like the footer underneath the screen. I also assume that setting height to 100vh is not something one is supposed to need to do.

I’ve considered avoiding this whole problem by using viewport-fit=contain instead, but then I get a white area on both the top and bottom that I am able to remove.

Have I misunderstood something important here, or is this a bug? Any ways to overcome this? Has anyone used viewport-fit=cover on iOS with success, i.e. not having any white areas anywhere and managing to scale the content to the full screen size?

In advance, thanks for any help!

Steps to reproduce this issue

  1. Create a new empty project
  2. Replace the viewport meta tag with <meta name="viewport" content="initial-scale=1, viewport-fit=cover">
  3. Make the body background color yellow (or any other non-white color), just to be able to see where the body ends.

I am using platform version v2.8.6 and running on iOS simulator for iPhone 11 with iOS 13.5.

Rotating the device also forces a recalculate. We’re still looking for a way to trigger this programmatically.

For now, the workaround I’ve found that works best is to specify safe-area insets for all page directions:

body {
    background-color: yellow;
    padding-top: env(safe-area-inset-top);
    padding-left: env(safe-area-inset-left);
    padding-bottom: env(safe-area-inset-bottom);
    padding-right: env(safe-area-inset-right);

I’ve created an issue to track this as we gear up for the annual iOS update: