-
Notifications
You must be signed in to change notification settings - Fork 1.1k
Description
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.1Platforms 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