Skip to content

Black bar appears above the keyboard on iPad #6

@AurelienJoy

Description

@AurelienJoy

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:
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

        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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions