fix(ios): prevent black QuickType bar when using Magic Keyboard on iPad + Fix Keyboard on iOS 26#52
fix(ios): prevent black QuickType bar when using Magic Keyboard on iPad + Fix Keyboard on iOS 26#52Daniele-rolli wants to merge 9 commits into
Conversation
…ad + Fix Keyboard on iOS 26
theproducer
left a comment
theproducer
left a comment
There was a problem hiding this comment.
@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
left a comment
OS-pedrogustavobilro
left a comment
There was a problem hiding this comment.
@theproducer leaving a few comments of things I noticed.
| if ([[[UIApplication sharedApplication] delegate] respondsToSelector:@selector(window)]) { | ||
| window = [[[UIApplication sharedApplication] delegate] window]; | ||
| } | ||
| if (!window && @available(iOS 13.0, *)) { |
There was a problem hiding this comment.
@available(iOS 13.0, *) should always be true for Capacitor 8+, so it's not needed right?
| // Make WKWebView transparent | ||
| if (self.webView) { | ||
| self.webView.opaque = NO; | ||
| self.webView.backgroundColor = UIColor.clearColor; | ||
| self.webView.scrollView.backgroundColor = UIColor.clearColor; | ||
| } |
There was a problem hiding this comment.
Due to how vastly different UIs of Web Apps / Capacitor Apps can be, I'm wondering if such a change could have unforeseen consequences in app's UI. Is this how it is on Android?
| } | ||
|
|
||
| - (void)updateBackdropColor { | ||
| if (self.bridge.config.backgroundColor) { |
There was a problem hiding this comment.
Capacitor config has config.backgroundColor and config.ios.backgroundColor, which is said that should override the global one. In that case we should check if config.ios.backgroundColor is defined and use that one, otherwise use config.backgroundColor, or update from the DOM?
Source: https://github.com/ionic-team/capacitor/blob/main/cli/src/declarations.ts
3 participants
Context
On iPads with a hardware keyboard (e.g., Magic Keyboard), iOS still fires
UIKeyboardWillShow/UIKeyboardDidShownotifications 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
WKWebViewand 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
iPhone Example
Solution
A height threshold guard was added in
onKeyboardWillShowandonKeyboardDidShowin the iOSKeyboardPlugin:If
UIDevice.userInterfaceIdiom == .padandkeyboardHeight < 100px:WKWebView.keyboardHeight = 0to indicate “no real keyboard.”Otherwise, continue with normal resizing behavior.
Additional improvements:
updateBackdropColorFromDOM.Benefits