11

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.

enter image description here

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).

enter image description here

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.

enter image description here

enter image description here

The cutout area/statusbar is covering my web content:

enter image description here

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

Doctor.Who.
  • 607
  • 1
  • 7
  • 15
  • Just bumped into the same behavior. Found this Chrome update log: https://www.androidpolice.com/2018/08/08/chrome-beta-69-adds-support-display-cutouts-becomes-media-player-android-go-apk-download/ – Dmitry Evseev Oct 19 '18 at 07:55
  • Seems like this is impossible at the moment. Even Ionic struggles: https://github.com/ionic-team/ionic/issues/17927. My solution is no disable statusbar overlay on Android (OS will add the required black padding by itself). – Finesse May 07 '20 at 13:44

1 Answers1

6

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.

Dmitry Evseev
  • 11,533
  • 3
  • 34
  • 48
  • 5
    Tested on *real* android device with *real* notch on Chrome 72 browser and webview. Doesn't work, always 0. It seems that chrome support for safe area inset is just a hoax. – TwilightSun Oct 11 '19 at 07:34
  • I feel you, this week I got a bug reported about it again. Going to explore the state again. But I suspect that the browser versions spread is the cause. – Dmitry Evseev Oct 11 '19 at 08:00