Black Border Issue on iPad with Magic Keyboard

Ionic Framework Ionic React
1

Description:

I’m experiencing a black border that appears at the bottom of my Ionic app when using an iPad with a Magic Keyboard. This border is especially noticeable while typing and can be quite distracting.

Steps to Reproduce:

  1. Open my Ionic app on an iPad with a Magic Keyboard.
  2. Start typing in a text input field.
  3. Observe the black border that appears at the bottom of the keyboard.

Expected Behavior:

The app viewport should display without any black borders, ensuring a clean and uninterrupted user experience.

Ionic Version: 7.6.2
Platform: iPadOS 18.0

2

A screenshot of what you are seeing and what you expect would be useful.

Also, Ionic 7 is EOL October 17 so you might want to upgrade to Ionic 8.

3

Thanks for the heads up! I’ll update to version 8 as soon as possible. Here’s a screenshot of the issue: as you can see, there’s a black bar that cuts off the bottom of the viewport.

IMG_0142
IMG_01422360×1640 123 KB

4

Is the black part still part of the viewport? Wondering if this is an Ionic issue or something with Capacitor. Are you able to add some CSS to cause the black bar to disappear?

What version of Capacitor are you on?

5

Thanks for your willingness to help! I found a solution to my issue, which is actually related to Capacitor, not Ionic. The problem seems to be with the Keyboard plugin and can be solved by adding the following to the capacitor.config.ts file:

 plugins: {
    Keyboard: {
      //@ts-ignore
      resize: "none",
    },
},
1 Like
6

Since you are using TS, you should be able to use KeyboardResize.None and not have to @ts-ignore.

And add the following at the top:

/// <reference types="@capacitor/keyboard" />
1 Like