Dark gap above Android keyboard when using Keyboard.resize = "body" in Capacitor

I’m building a React PWA packaged with Capacitor for Android.
I need the app to resize when the keyboard appears because a formatting toolbar must stay above the keyboard (similar to any notes apps).

Here is my capacitor.config.json

{
  "appId": "com.app.myapp",
  "appName": "myApp",
  "webDir": "dist",
  "plugins": {
    "Keyboard": {
      "resize": "body",
      "resizeOnFullScreen": true
    }
  }
}

The body resizes correctly only when resizeOnFullScreen is set to true.
However, this causes a dark bar (or gap) to appear directly above the keyboard on Android. It stays there as long as the keyboard is open.

Here is an image

Here is what I’ve already tried:

1. Switching resize to "native".

2. Checking for extra padding/margins in CSS — none exist, and DevTools shows the viewport shrinking correctly.

3. Adding EdgeToEdge configuration:

"EdgeToEdge": {
  "backgroundColor": "#FFFFFF"
}
 

I also looked up the issue online and followed those steps (as mentioned above) did not work. Here is the link.

Environment:

• OS: Windows 11

• Target: Android 15

• Device: Xiaomi Redmi Note 12 (HyperOS 2)

Has anyone encountered this dark inset/gap above the keyboard when using resize = "body" with fullscreen resizing enabled?
Is there a recommended configuration for avoiding this while still allowing the webview to resize with the keyboard?

Any help is appreciated.