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.

[theproducer]

Maybe instead of making the web view transparent, we should set the background color to one set in the Capacitor config?

NSString *configBackgroundColor = [[[self bridge] config] getString:@"backgroundColor"];
    
UIColor *backgroundColor = [self colorFromCssColorString:(NSString *)configBackgroundColor];
if (backgroundColor) {
    [self forceBackdropColor:backgroundColor];
}

And if that's not set, maybe we then resort to pulling from the DOM body?

[theproducer]

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

Maybe we shouldn't have iPad be a differentiator in these checks? Theoretically someone could have a bluetooth keyboard connected to an iPhone...