iOS 11 Floating Cursor Above Ion-SearchBar

[ionitron-bot]

Original issue by @mino922 on 2017-09-29T02:56:36Z

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