ionic-team / ionic-team/capacitor-keyboard

Black bar appears above the keyboard on iPad

Open
#6 1 comment 2 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
3
Forks
21
PR merge metrics
No merged PRs in 30d

Description

On iPad, a black bar appears above the keyboard component.

### Expected Behavior
The keyboard should be displayed properly and should fit the viewport.

### Environment
- Platform: iOS 18.6
- Plugins:
- Capacitor Keyboard: 7.0.2
- Capacitor StatusBar: 7.0.2
- Capacitor Plugin Config:
```ts
plugins: {
StatusBar: {
overlaysWebView: false,
style: 'DARK',
backgroundColor: '#212665'
},
Keyboard: {
resizeOnFullScreen: true // Only for Android
},
...
}
```

### Notes

I've tested with portrait and landscape mode, issue appears on both.

### Screenshots

Image

### Additional informations

It looks like the keyboard height is not correctly calculated or it does not take into account the height of the status bar because the height of the black bar looks similar to the height of the status bar. After inspecting the web context I can say that this black bar is not part of the viewport.

If I set the plugin configuration with

```ts
Keyboard: {
resizeOnFullScreen: true, // Only for Android
resize: KeyboardResize.None
},
```

it fixes the issue but I cannot do that because I need the resize feature in my app.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.