feat(SystemBars): add keyboardInsetsHandling option to let the keyboard overlay the webview - #8612
piotrblasiak wants to merge 1 commit into
Conversation
…rd overlay the webview
|
I don't think it's wise to introduce yet another config variable. Better would be to deprecate/remove the keyboard resizing stuff altogether (in the That being said, may I ask for what use case you would want to set |
|
windowSoftInputMode adjustNothing is needed if you want to control what the keyboard covers in the app. In my case, i want it to cover some controls that are not needed when in keyboard input mode, leaving more room for other things. @tafelnl what do you suggest? |
Detecting the value in the manifest
So why not hide those instead? I'm trying to understand the use case, as that helps solving the issue |
Because the controls (in my case a tab bar) follow the bottom border of the window, so hiding them would either mean you would have to just make them disappear/reappear instantly when the keyboard starts/stops animating or it would look very awkward. See attached video of how it looks when it works correctly. ScreenRecording_09-21-2026.07-40-49_1.MP4 |
|
@tafelnl but most of all I think the behavior this introduced should be considered a rather critical bug. In my case, this made the app unexpectedly completely useless - as my table calculates the remaining window height that it can use and it already took into account the keyboard height - so all my tables broke. If someone sets windowSoftInputMode to adjustNothing, itäs probably for a good reason and should be respected? |
Probably yes. But it's always good to understand the whole picture so that we end up implementing a correct fix. Some background information that some might find useful: The changes around the safe area have introduced several other bugs in the past (some of which might have occurred in your app without your knowledge). It's unfortunate that we didn't get a lot of time from Google to implement a proper fix, or moreover that Google doesn't take care of this in their own webview itself like Apple does. Google was also delaying answers/fixes on bugs raises in their issuetracker for some reason. Only when the Capacitor community (and probably other developers using a webview) pushed again and again they made some progress finally. On the other hand the Capacitor team should've probably take more care when tackling this issue and they should have released a beta/preview version first. That - btw - seems to be an issue within the Capacitor community in general. There's not a lot of testing going on. It kind of makes sense though, because developers using Capacitor are generally not experienced native developers, so it's hard to test and debug native code anyways. Anyways, a proper fix should indeed be implemented. Without having dug into this I would suggest to do what I mentioned before: remove the logic from keyboard plugin entirely, as it just causes confusion. Additionally the safe area plugin should detect the value of the |
|
When looking at the Android docs, I see the following:
Especially this part is interesting:
This insinuates that when going for As far as I'm concerned, we should detect the following values and act accordingly:
|
Yes. I guess a problem is that js developers use playwright by default, which doesn't really support testing on a device or sim.
You're right - this is the better approach. The one catch is that WebView >= 139 resizes the visual viewport for the IME insets, so the page becomes pannable above the keyboard, but that should be solvable the standard way with About removing the resize logic from the keyboard plugin, I guess you mean the Android part (resizeOnFullScreen)? On iOS the resize option is the only way to control this, there is no manifest equivalent, so that would need to stay. And the keyboard events with the height are still needed on both platforms, on iOS |
|
@tafelnl I tested passing the IME insets through on device now, and unfortunately it doesn't work: the page still pans above the keyboard even with I also managed to delete my fork, so this PR can't be updated anymore. I opened #8619 instead, reworked the way you suggested: no config option, adjustNothing is detected from the window's soft input mode, and in that case the padding is skipped and the IME insets are zeroed. Everything else is unchanged, and the |
Description
Adds a
SystemBars.keyboardInsetsHandlingconfig option for Android:resize(default): current behavior, the webview is padded by the IME inset while the keyboard is visible.none: the webview is left untouched and the keyboard overlays it.With
none, the insets listener treats the keyboard as not visible (so no IME padding is applied) and sets the IME insets it returns toInsets.NONE/ not visible. The second part is needed because WebView >= 139 resizes its visual viewport for the IME insets it receives, which makes the whole page pannable above the keyboard. Zeroing rather than consuming follows the Android guidance and matches what this listener already does for system bar insets.Change Type
Rationale / Problems Fixed
closes #8611
Since #8384 (8.3.0) the webview is always resized for the keyboard, even when the activity declares
android:windowSoftInputMode="adjustNothing". Apps that keep content clear of the keyboard themselves, using the height from@capacitor/keyboardas they do on iOS withresize: "none", now account for the keyboard twice, and there is no way to opt out other thaninsetsHandling: "disable", which also drops the safe area handling. This was asked for in #8384 (comment) and is what ionic-team/capacitor-keyboard#63 tries to solve from the keyboard plugin's side.Nothing changes unless the option is set.
Tests or Reproductions
Reproduction: https://github.com/piotrblasiak/capacitor-keyboard-overlay-repro (fresh
npm init @capacitor/app+adjustNothing+ an input and a fixed bottom bar; showswindow.innerHeightandvisualViewport.height).window.innerHeightshrinks by the keyboard height and the fixed bar jumps above the keyboard.keyboardInsetsHandling: "none": both heights stay unchanged, the bar stays under the keyboard, the page cannot be panned, andkeyboardWillShow/keyboardWillHidestill fire with the correct height (the keyboard plugin reads the root window insets).Tested with the reproduction project on a Zebra TC58 (Android 15, Android System WebView 151.0.7922.199).
Platforms Affected
Notes / Comments
Happy to rename the option or key it off
windowSoftInputMode="adjustNothing"instead if you prefer that over a new config value.