Skip to content

Conversation

Daniele-rolli
Copy link

@Daniele-rolli Daniele-rolli commented Aug 30, 2025

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
iPad Before iPad After

iPhone Example

Before After
Simulator Screenshot - iPhone 16e - 2025-09-08 at 19 35 03 Simulator Screenshot - iPhone 16e - 2025-09-08 at 22 09 28

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

@Daniele-rolli Daniele-rolli changed the title fix(ios): prevent black QuickType bar when using Magic Keyboard on iPad fix(ios): prevent black QuickType bar when using Magic Keyboard on iPad + Fix Keyboard on iOS 26 Sep 8, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant