bug(android): overlaying status bar does not affect safe area insets

See original GitHub issue

Bug Report

Capacitor Version

npx cap doctor output:

$ npx cap doctor 💊 Capacitor Doctor 💊

Latest Dependencies:

@capacitor/cli: 2.0.1

@capacitor/core: 2.0.1

@capacitor/android: 2.0.1

@capacitor/electron: 2.0.1

@capacitor/ios: 2.0.1

Installed Dependencies:

@capacitor/electron not installed

@capacitor/cli 2.0.1

@capacitor/core 2.0.1

@capacitor/android 2.0.1

@capacitor/ios 2.0.1

[success] Android looking great! 👌 Found 10 Capacitor plugins for ios: @mauron85/cordova-plugin-background-geolocation (3.1.0) capacitor-data-storage-sqlite (2.0.0-1) capacitor-voice-recorder (0.0.9) cordova-plugin-android-permissions (1.0.2) cordova-plugin-app-version (0.1.9) cordova-plugin-file (6.0.2) cordova-plugin-file-transfer (1.7.1) cordova-plugin-screen-orientation (3.0.2) cordova-plugin-whitelist (1.3.4) es6-promise-plugin (4.2.2) [success] iOS looking great! 👌

Affected Platform(s)

Android
iOS
Electron
Web

Current Behavior

On iOS, I leave space for the iPhone X notch & iPhone 6 status bar using <meta name="viewport" content="viewport-fit=cover" /> along with env(safe-area-inset-top), as described in #2100 .

I would love to do the same thing in Android, however it appears that overlaying the status bar via StatusBar.setOverlaysWebView({ overlay: true }) does not affect env(safe-area-inset-top) in the CSS. env(safe-area-inset-*) has officially been supported since Chrome 69 (announcement) though how extensively I don’t know.

Expected Behavior

I would expect env(safe-area-inset-top) to include the height of the status bar if it is overlaid.

Reproduction Steps

    // Display content under transparent status bar (Android only)
    StatusBar.setOverlaysWebView({
      overlay: true
    });

Other Technical Details

npm --version output: 6.14.4

node --version output: v12.16.1

Other Information

If fixing env(safe-area-inset-top) is not possible, I would be satisfied being able to access the safe area insets via a Plugin, or injected CSS variables (e.g. --android-safe-area-inset-top or similar).

Issue Analytics

State:
Created 3 years ago
Reactions:21
Comments:20 (1 by maintainers)

Top GitHub Comments

2reactions

igorcdcommented, Mar 26, 2021

I’m developing a plugin that sends the device insets, at the moment works only on android, and send only top, its for a emergency. https://www.npmjs.com/package/capacitor-insets-plugin

const { StatusBar, InsetsPlugin } = Plugins;

StatusBar.setOverlaysWebView({ overlay: true });
StatusBar.setStyle({ style: StatusBarStyle.Dark });

InsetsPlugin.top()
    .then((resp: { value: number }) => {
        document.documentElement.style.setProperty('--top-inset', `${resp.value}px`);
    });

2reactions

Cyralcommented, Dec 22, 2020

@haschu Nope. Tons of apps do this, seems very common - but still haven’t found a way with Capacitor/Ionic