Skip to content

[Bug]: System Bar safe-area-inset-x ignores Keyboard state #8287

@schwebke

Description

@schwebke

Capacitor Version

💊 Capacitor Doctor 💊

Latest Dependencies:

@capacitor/cli: 8.0.0
@capacitor/core: 8.0.0
@capacitor/android: 8.0.0
@capacitor/ios: 8.0.0

Installed Dependencies:

@capacitor/ios: not installed
@capacitor/cli: 8.0.0
@capacitor/core: 8.0.0
@capacitor/android: 8.0.0

[success] Android looking great! 👌

Other API Details

npm --version: 11.6.2
node --version: v24.11.1

Platforms Affected

  • iOS
  • Android
  • Web

Current Behavior

With plugin.SystemBars.insetsHandling = css and no keyboard my app works fine using:

body {
    box-sizing: border-box;
    height: 100dvh;
    width: 100dvw;
    padding-top: var(--safe-area-inset-top, env(safe-area-inset-top, 0px));
    padding-bottom: var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px));
    padding-left: var(--safe-area-inset-left, env(safe-area-inset-left, 0px));
    padding-right: var(--safe-area-inset-right, env(safe-area-inset-right, 0px));
    display: flex;
}

With the keyboard displayed, the bottom inset remains, creating superfluous spacing between the upper border of the on screen keyboard and the webview content.

As a workaround I added as css style ...

body.no-bottom-inset {
    --safe-area-inset-bottom: 0px;
}

... and these handlers in my code:

    Keyboard.addListener('keyboardWillShow', info => {
        console.log('keyboard did show with height:', info.keyboardHeight);
        document.body.classList.add('no-bottom-inset');
    });

    Keyboard.addListener('keyboardWillHide', () => {
        console.log('keyboard did hide');
        document.body.classList.remove('no-bottom-inset');
    });

Expected Behavior

I feel making safe-area-inset-x variables keyboard aware would be more natural.

Project Reproduction

https://github.com/schwebke/capacitor-system-bar-keyboard-interaction

Additional Information

Screenshots showing the issue and the effect of the workaround:
https://github.com/schwebke/capacitor-system-bar-keyboard-interaction/tree/main/screenshots

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions