iOS 11 Floating Cursor Above Ion-SearchBar

[mino922]

Resources:
Before submitting an issue, please consult our troubleshooting guide (http://ionicframework.com/docs/troubleshooting/) and developer resources (http://ionicframework.com/docs/developer-resources/)

Please make sure you are posting an issue pertaining to the Ionic Framework. If you are having an issue with the Ionic Pro services (Ionic View, Ionic Deploy, etc.) please consult the Ionic Pro support portal (http://support.ionicjs.com)

Ionic version: (check one with "x")
(For Ionic 1.x issues, please use https://github.com/ionic-team/ionic-v1)
[ ] 2.x
[x] 3.x
[ ] 4.x

I'm submitting a ... (check one with "x")
[x ] bug report
[ ] feature request

Please do not submit support requests or "How to" questions here. Instead, please use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/

Current behavior:

When I click on an ion-search bar, the cursor appears to float above and is not inline with the input area.

Expected behavior:

The cursor should be inline with the input field. This was working correctly in iOS 10, but not longer in iOS 11

Steps to reproduce:

Click on the ion-searchbar in the project below.

Here is a video demoing the problem on an iPhone 6s:

Related code:

Sample Project

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

cli packages: (/usr/local/lib/node_modules)

    @ionic/cli-utils  : 1.12.0
    ionic (Ionic CLI) : 3.12.0

global packages:

    cordova (Cordova CLI) : 7.0.1 

local packages:

    @ionic/app-scripts : 3.0.0
    Cordova Platforms  : ios 4.4.0
    Ionic Framework    : ionic-angular 3.7.0

System:

    ios-deploy : 1.9.1 
    ios-sim    : 5.0.8 
    Node       : v6.11.2
    npm        : 3.10.10 
    OS         : macOS Sierra
    Xcode      : Xcode 9.0 Build version 9A235 

Misc:

    backend : legacy

[kensodemann]

Hello! Thank you for opening an issue with us!

Installing the WKWebView plugin took care of the issue for me. https://github.com/ionic-team/cordova-plugin-ionic-webview#installation-instructions. Please give that a try and let me know if that took care of it for you.

Be sure to have a look at this doc as well: http://ionicframework.com/docs/wkwebview/

Side Note: This seems to be weirdly specific to the iPhone 6s. Could not duplicate on my iPhone 7 nor on any sim I tried other than iPhone 6s. Very strange.

Thank you for using Ionic

[mqasem92]

@kensodemann I have the same issue here the cursor is not stable when foucing on the text input or scrolling the page.

WKWebView plugin installed and configured, but the problem still on IPhone 6s and IPhone 7 plus
with IOS11.1

Any advice please ?

[mino922]

I'm having trouble getting my app to run with that plugin installed. I looked at the additional documentation you provided, but not having much luck.

Here is the error I get in xcode console

Terminating app due to uncaught exception 'NSUnknownKeyException', reason: '[<WKWebViewConfiguration 0x6040001ef700> setValue:forUndefinedKey:]: this class is not key value coding-compliant for the key _requiresUserActionForMediaPlayback.'
*** First throw call stack:
(
0 CoreFoundation 0x00000001129151cb __exceptionPreprocess + 171
1 libobjc.A.dylib 0x00000001118d8f41 objc_exception_throw + 48
2 CoreFoundation 0x0000000112915119 -[NSException raise] + 9
3 Foundation 0x00000001112fb1e3 -[NSObject(NSKeyValueCoding) setValue:forKey:] + 292
4 *** 0x000000010c014bf6 __43+[APPBackgroundMode swizzleWKWebViewEngine]_block_invoke + 358
5 *** 0x000000010c1097d2 -[CDVWKWebViewEngine pluginInitialize] + 850
6 *** 0x000000010c13556b -[CDVViewController registerPlugin:withClassName:] + 315
7 *** 0x000000010c134c7c -[CDVViewController newCordovaViewWithFrame:] + 1404
8 *** 0x000000010c135182 -[CDVViewController createGapView] + 354
9 *** 0x000000010c1326d6 -[CDVViewController viewDidLoad] + 566
10 *** 0x000000010c013506 -[MainViewController viewDidLoad] + 54
11 UIKit 0x000000010e9b9d51 -[UIViewController loadViewIfRequired] + 1235
12 UIKit 0x000000010e9ba19e -[UIViewController view] + 27
13 UIKit 0x000000010e88dd17 -[UIWindow addRootViewControllerViewIfPossible] + 122
14 UIKit 0x000000010e88e41f -[UIWindow _setHidden:forced:] + 294
15 UIKit 0x000000010e8a12bf -[UIWindow makeKeyAndVisible] + 42
16 *** 0x000000010c136fc8 -[CDVAppDelegate application:didFinishLaunchingWithOptions:] + 776
17 *** 0x000000010c013287 -[AppDelegate application:didFinishLaunchingWithOptions:] + 199
18 UIKit 0x000000010e81335a -[UIApplication _handleDelegateCallbacksWithOptions:isSuspended:restoreState:] + 267
19 UIKit 0x000000010e814db7 -[UIApplication _callInitializationDelegatesForMainScene:transitionContext:] + 4105
20 UIKit 0x000000010e81a245 -[UIApplication _runWithMainScene:transitionContext:completion:] + 1720
21 UIKit 0x000000010ebd5c6c __111-[__UICanvasLifecycleMonitor_Compatability _scheduleFirstCommitForScene:transition:firstActivation:completion:]_block_invoke + 924
22 UIKit 0x000000010efa33ef +[_UICanvas _enqueuePostSettingUpdateTransactionBlock:] + 153
23 UIKit 0x000000010ebd5865 -[__UICanvasLifecycleMonitor_Compatability _scheduleFirstCommitForScene:transition:firstActivation:completion:] + 249
24 UIKit 0x000000010ebd60c3 -[__UICanvasLifecycleMonitor_Compatability activateEventsOnly:withContext:completion:] + 668
25 UIKit 0x000000010f533c11 __82-[_UIApplicationCanvas _transitionLifecycleStateWithTransitionContext:completion:]_block_invoke + 262
26 UIKit 0x000000010f533aca -[_UIApplicationCanvas _transitionLifecycleStateWithTransitionContext:completion:] + 444
27 UIKit 0x000000010f221b9c __125-[_UICanvasLifecycleSettingsDiffAction performActionsForCanvas:withUpdatedScene:settingsDiff:fromSettings:transitionContext:]_block_invoke + 420
28 UIKit 0x000000010f41cc3e _performActionsWithDelayForTransitionContext + 100
29 UIKit 0x000000010f221998 -[_UICanvasLifecycleSettingsDiffAction performActionsForCanvas:withUpdatedScene:settingsDiff:fromSettings:transitionContext:] + 231
30 UIKit 0x000000010efa2a4c -[_UICanvas scene:didUpdateWithDiff:transitionContext:completion:] + 392
31 UIKit 0x000000010e818ac6 -[UIApplication workspace:didCreateScene:withTransitionContext:completion:] + 523
32 UIKit 0x000000010ede1523 -[UIApplicationSceneClientAgent scene:didInitializeWithEvent:completion:] + 369
33 FrontBoardServices 0x000000011a07b158 -[FBSSceneImpl _didCreateWithTransitionContext:completion:] + 338
34 FrontBoardServices 0x000000011a083c4d __56-[FBSWorkspace client:handleCreateScene:withCompletion:]_block_invoke_2 + 235
35 libdispatch.dylib 0x0000000113a1a43c _dispatch_client_callout + 8
36 libdispatch.dylib 0x0000000113a1faf4 _dispatch_block_invoke_direct + 592
37 FrontBoardServices 0x000000011a0af672 FBSSERIALQUEUE_IS_CALLING_OUT_TO_A_BLOCK + 24
38 FrontBoardServices 0x000000011a0af328 -[FBSSerialQueue _performNext] + 464
39 FrontBoardServices 0x000000011a0af897 -[FBSSerialQueue _performNextFromRunLoopSource] + 45
40 CoreFoundation 0x00000001128b82b1 CFRUNLOOP_IS_CALLING_OUT_TO_A_SOURCE0_PERFORM_FUNCTION + 17
41 CoreFoundation 0x0000000112957d31 __CFRunLoopDoSource0 + 81
42 CoreFoundation 0x000000011289cc19 __CFRunLoopDoSources0 + 185
43 CoreFoundation 0x000000011289c1ff __CFRunLoopRun + 1279
44 CoreFoundation 0x000000011289ba89 CFRunLoopRunSpecific + 409
45 GraphicsServices 0x0000000116d0b9c6 GSEventRunModal + 62
46 UIKit 0x000000010e81bd30 UIApplicationMain + 159
47 *** 0x000000010c0131a1 main + 65
48 libdyld.dylib 0x0000000113a96d81 start + 1
49 ??? 0x0000000000000001 0x0 + 1
)
libc++abi.dylib: terminating with uncaught exception of type NSException
(lldb)

It seems to be pointing to this section of code:

#import <UIKit/UIKit.h>

int main(int argc, char* argv[])
{
    @autoreleasepool {
        int retVal = UIApplicationMain(argc, argv, nil, @"AppDelegate");
        return retVal;
    }
}

[mqasem92]

@mino922 are you fix your issue ?

[mino922]

@mqasem92 I am still having this issue. I am unable to run my app with the WKWebView plugin installed, so I cannot validate that this solves the issue.

The app builds fine, but fails to run on the device.

Sorry, I didn't mean to close the issue!

[kensodemann]

@mino922 - is that happen in the sample app for you as well, or only in you actually application? It did not happen for me in the sample app. If it does not happen in the sample app for you either but does happen in your app, then we have some work to do to determine what specific difference(s) between the apps lead to the issue.

Regardless, you should log an issue in the https://github.com/ionic-team/cordova-plugin-ionic-webview repo about that.

[kensodemann]

@mqasem92 - the issue you describe sounds more like #12992, this issue is specific to the IonSearchBar and (at least in my testing) appears to be specific to the iPhone6s when running iOS 11.

[mqasem92]

@kensodemann Yes, u're right.
I'm sorry for this confused, I'll be updated on this one #12992

[mino922]

@kensodemann it only happens in my actual app. Works fine in the sample I provided.

Any thoughts on where I should begin my troubleshooting?

I will also post on the repo you provided.

Thanks.

[mino922]

@kensodemann Here is the issue, if you'd like to follow

[mhartington]

Hmm, Im not able to replicate on my end using the lates wkwebview plugin and the nightly version of Ionic. Could you test this and confrm @mino922

[mino922]

There is an issue with wkwebview plugin and cordova-plugin-background-mode. My app requires cordova-plugin-background-mode, but I did a quick test and removed that plugin and the floating cursor issue went away. However, with wkwebview enabled I am seeing other issues.

Is there a solution to this problem that does not include the wkwebview plugin?

[Tyler-Darby]

I started facing this issue after applying viewport-fit=cover to fix the status bar issue that came with iOS 11. The cursor floats above any inputs for me.

[mhartington]

@Tyler-Darby do you have a sample project?

[mino922]

I found a bug in my code, which was causing some of the issues I was seeing with wkwebview enabled. That is now resolved.

The floating cursor issue is no longer an issue. I just have a problem using wkwebview and cordova-background-mode in conjunction. I opened an issue on that page, but have yet to hear anything.

[mhartington]

the background plugin has a PR that should address this, but the plugin is not using a public/documented APIs so there's a chance Apple will reject an App with it or even break when Apple releases a new OS version.

[mino922]

@mhartington What do you mean by PR?

Are there any alternatives to the background plugin?

[Tyler-Darby]

@mhartington I'll try to repro in a fresh project but right now all I have is my company project. I'll get back on that in a bit.

@mino922 What did you change to resolve this issue?

[mhartington]

Any luck on that demo @Tyler-Darby ?

[Tyler-Darby]

@mhartington When I upgraded to WKWebView the problem resolved itself. I can try to repro on UIWebView at some point if you need me to but it seems that WKWebView solved it for me.

[ggravand]

Please also address this problem on UIWebView as WKWebView does not work well with the search bar and hence prevents me from using WKWebView at all. Specifically, WKWebView prevents setting focus programmatically (e.g. see #11453) - some has made various hacks and patches to make it work, but it still is not possible in my use cases.

[ourarash]

I have the same problem with UIWebView, and viewport-fit=cover. I cannot use WKWebView because it has issues with resizing pictures.

[mhartington]

@ourarash WKWebview is going to be a hard requirement moving forward as UIwebview has some serious issues involving the safe-layouts values we now use in the framework

[ionitron-bot]

Thanks for the issue! We have moved the source code and issues for Ionic 3 into a separate repository. I am moving this issue to the repository for Ionic 3. Please track this issue over there.

Thank you for using Ionic!

[ionitron-bot]

Issue moved to: ionic-team/ionic-v3#891