[Bug]: Keyboard Plugin (with resize: "native"+resizeOnFullScreen: true) resizes view wrong

[timephy]

Please see #61 (comment)

⚠️ Please read this comment instead of reading this very old issue post.

---

---

I had originally reported this bug here: ionic-team/capacitor#8095. Where it was falsely flagged as fixed, and then ignored. I reopened it as ionic-team/capacitor#8398, where I was told to report it here, so here it is.

Even though there are the old versions listed below, as you can see from the original issue, myself and other users still report this as being wrong in new versions.

---

Capacitor Version

💊 Capacitor Doctor 💊

Latest Dependencies:

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

Installed Dependencies:

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

[success] Android looking great! 👌

Other API Details

Platforms Affected

• iOS
• Android
• Web

Current Behavior

As first described in #8055 the Keyboard Plugin resizes the view wrong, this has changed recently when resizeOnFullScreen: true was changed to now treat the CSS safearea differently.

• A gray bar appears above the keyboard when it opens
• This gray bar seems to have the height of the top-safearea

I reproduced this in a new repo with these minimal steps:

• new svelte project
• installed capacitor + Keyboard plugin
• Keyboard options resize: "native" + resizeOnFullScreen: true

https://github.com/timephy/capacitor-issue-keyboard-android

Expected Behavior

All usable space should be used, no gray bar should appear!

Project Reproduction

https://github.com/timephy/capacitor-issue-keyboard-android

Additional Information

No response

[timephy]

One user reported using this community plugin fixes the problem:

Update on this, I installed this plugin : https://github.com/capacitor-community/safe-area

And it solved the issue. The small bar that was appearing when the keyboard layout would open is gone and it all works

However I believe that using a community plugin to fix a layout issue of this plugin is not in the interest of anyone.

[Emeseis]

I'm currently using version 8.0.1 instead of 8.0.2 as a workaround for this issue.

[timephy]

to my knowledge this happens no matter the version... from 7.x to 8.x

[timephy]

I had even worse problems with @capacitor/keyboard@8.0.2 and update to 8.0.3 today.

I am happy that this fixed the SUPER HUGE gray bar that appeared with 8.0.2:

[timephy]

I have created this screen recording (running 8.0.3), which still shows some weird behavior:

• 0:06 → Selected Text Input, but no Keyboard
• 0:13, 0:25, 0:30 → Resized Frame, but no Keyboard

Please note that when the Keyboard finally shows, the frame is resized again.
This happens often when the Keyboard appears "normally" too, not only after the "Resized Frame, but no Keyboard" case.

This only happens on Android, not on iOS.

2026-04-13.10.47.26.mp4

│   dependencies:
├── @capacitor/android@8.3.0
├── @capacitor/app@8.1.0
├── @capacitor/browser@8.0.3
├── @capacitor/clipboard@8.0.1
├── @capacitor/core@8.3.0
├── @capacitor/file-transfer@2.0.4
├── @capacitor/filesystem@8.1.2
├── @capacitor/ios@8.3.0
├── @capacitor/keyboard@8.0.3
├── @capacitor/screen-orientation@8.0.1
├── @capacitor/share@8.0.1
├── @capacitor/splash-screen@8.0.1
│
│   devDependencies:
├── @capacitor/assets@3.0.5
├── @capacitor/cli@8.3.0
├── @types/node@25.6.0
└── typescript@5.9.3

[KeitelDOG]

@timephy @capacitor/keyboard@8.0.0 was working just fine for me with resizeOnFullScreen: false. I updated it to @capacitor/keyboard@8.0.3 and it pushed the bottom very high with extra space under. I'm gonna get back to 8.0.0 for now, when I have time I will investigate on my side.

[timephy]

Thank you @KeitelDOG for sharing your way of working around it. I will have to do the same I guess...

We are now encroaching on 9 MONTHS of this GRAY BAR appearing above the Keyboard (original issue). 😔

[theproducer]

Hello, @timephy! What version of android was this recorded on?

[timephy]

Hello, @timephy! What version of android was this recorded on?

Hey @theproducer,
this is Android 16 on a Google Pixel 6a. See details in screenshot below:

[KeitelDOG]

@timephy From my experience with this bottom space, in Android by mainly in iOS, it is often a combination of Keyboard plugin version and HTML Meta tag for viewport. I'm giving my web config on this just in case anyone wanna play with it.

My experience with Next JS > 14 or > 15 with App router, in Layout.tsx:

export const viewport: Viewport = {
  width: "device-width",
  initialScale: 1,
  minimumScale: 1,
  maximumScale: 1,
  userScalable: false,
  viewportFit: "cover",
  interactiveWidget: "resizes-content",
};

My experience with Next 12 or 13 with page router with _document.jsx and _app.jsx:

<Head>
  <meta
    name="viewport"
    content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no interactive-widget=resizes-content"
  />
</Head>

For iOS, I use so many work around that works partially, mostly, but never fully, but that's when you're using Fixed or Absolute Input at the bottom. SO what I did instead was to Display Flex and keeping the input at the bottom with Flex End, or Space Between. This way the Browser doesn't miscalculate position relatively to a Fixed Input and leaving an incorrect blank space in the Android design system itself.

[timephy]

For me it has only appeared in Android so far. I am using this viewport setting:

<meta
    name="viewport"
    content="width=device-width, initial-scale=1, viewport-fit=cover, user-scalable=no, minimum-scale=1, maximum-scale=1"
/>