env(safe-area-inset-top) not working on Android Pie + WebView 69

Question

I have a fullscreen cordova app, I used to use the css below for iPhone X's notch,

padding-top: 25px;
padding-top: env(safe-area-inset-top);

and Android will ignore env(safe-area-inset-top), and use 25px to prevent the status bar from covering my view.

Here is the thing, I suddenly find out webview support env() after Android System Webview component was upgraded to version 69.0.3497.100 in my Android Oreo phone (Huawei mate10).

But when I install this cordova app in an Android Pie emulator(with cutout simulation enabled and Chrome/Webview 69 installed), I found that env(safe-area-inset-top) is 0px, there is no padding top at all.

The cutout area/statusbar is covering my web content:

Does Chrome/Webview 69 support safe-area-inset-top or not?

Answer 1

Support for env() constants was introduced in Chrome 69. Though the behavior, as I observe, is different from iOS. On iPhone 8 screen without notch env(safe-area-inset-top) equals to 20px, while on Moto G screen, without notch as well, it equals to 0.

As a workaround I'm using this function to set a class to body as soon as page loaded:

/**
 * Android save-area env variables behave differently from iOS ones:
 * env(safe-area-inset-top) will return 0 on Android and 20px on iOS.
 * In case android behavior spotted, body is added class `app-android-safe-area`
 */
function checkSafeArea() {
  const $body = $(document.body);
  const $div = $('<div style="padding-top: env(safe-area-inset-top); padding-top: constant(safe-area-inset-top);"></div>');

  $div.appendTo($body);

  const safeAreaInsetTop = $div.outerHeight();

  if (!safeAreaInsetTop) {
    $body.addClass('app-android-safe-area');
  }

  $div.remove();
}

And adapted my styles like that:

body.app-ts-mobile & {
  margin-top: 20px; // fallback for no safe area support
  margin-top: constant(safe-area-inset-top); // iOS 11
  margin-top: env(safe-area-inset-top); // iOS 11.2+
}

body.app-ts-mobile.app-android-safe-area & {
  margin-top: 20px;
}

Though I did not check yet what the value of env(safe-area-inset-top) is on Android screen with notch present. It could be that it lacks statusbar height.