fix(ios): prevent black QuickType bar when using Magic Keyboard on iPad + Fix Keyboard on iOS 26

[Daniele-rolli]

Context

On iPads with a hardware keyboard (e.g., Magic Keyboard), iOS still fires UIKeyboardWillShow / UIKeyboardDidShow notifications even when no software keyboard is displayed. Only the QuickType suggestion bar appears at the bottom of the screen.
Currently, Capacitor interprets these events as a "real keyboard," resizing the WKWebView and causing visual glitches such as a black bar below the webview.

On iOS 26, a similar issue occurs with liquid glass the new keyboard is transparent with rounded edges, which can render a black box underneath.

iPad Example

Before	After

iPhone Example

Before	After

Solution

A height threshold guard was added in onKeyboardWillShow and onKeyboardDidShow in the iOS KeyboardPlugin:

• If UIDevice.userInterfaceIdiom == .pad and keyboardHeight < 100px:

  • Treat the event as a QuickType bar, not a real keyboard.
  • Do not resize the WKWebView.
  • Fire JS events with keyboardHeight = 0 to indicate “no real keyboard.”

• Otherwise, continue with normal resizing behavior.

Additional improvements:

• WebView background is transparent, and its color is forced to match the DOM body via updateBackdropColorFromDOM.

Benefits

• iPad + Magic Keyboard: no unnecessary resize, no black bar.
• iPad + software keyboard: normal resize works as expected.
• iPhone: keyboard backdrop displays the same color as DOM

[theproducer]

@Daniele-rolli Hello! Thanks for this, we've been running into similar issues that you've detailed here. I left some comments and suggestions to your PR.

[OS-pedrogustavobilro]

@theproducer leaving a few comments of things I noticed.

[OS-pedrogustavobilro]

@Daniele-rolli this PR was merged in @capacitor/keyboard@8.0.4. Note however that this code differs from what you originally opened. Because of some points raised in this PR internally by the team, this fix is really rather an opt-in functionality (that may become default in a future major version).

So to apply the fix in its full capacity, one needs to add autoBackdropColor as auto in capacitor config file.

Thanks for the PR! Let us know if you have any questions.