Ion-searchbar shows white rectangle on iOS when blurred

[appelstroop]

Ionic version: (check one with "x")
[ ] 1.x
[ ] 2.x
[x] 3.x

I'm submitting a ... (check one with "x")
[x] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/

Current behavior:
On iOS, when the ion-searchbar element blurs, the keyboard leaves a white square at the bottom of the screen.

Expected behavior:
Worked fine in ionic 2.x

Steps to reproduce:
Deploy to iOS. Click on searchbar to focus. Then blur the search-bar by clicking on a button (or something similar)

Related code:

<ion-content padding>
  <ion-searchbar ></ion-searchbar>
  <button ion-button (click)="doSomething()"></button>
</ion-content>

Other information:
Tested on ionic starter as well, to make sure the issue was not related to our app.

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

Cordova CLI: 6.5.0 
Ionic Framework Version: 3.1.1
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 1.3.7
ios-deploy version: 1.9.1 
ios-sim version: Not installed
OS: macOS Sierra
Node Version: v6.9.5
Xcode version: Xcode 8.3.1 Build version 8E1000a

[jgw96]

Hello, thanks for using Ionic. Unfortunately, i cannot reproduce this issue, would you be able to post a repo we could use to reproduce this? Also, are you running into this issue on a dev or prod build?

[appelstroop]

Thanks jgw, we have this issue both with dev & prod builds. Both iphone SE and iphone 6 tested.

I created a a repo to reproduce this issue!

[asplundo]

Dont know if its the same issue but it behaves the same with tabs. Its simple to reproduce, create a new tabs project, add a search-bar and then focus and blur. The tabs wont be on the bottom at first, rather "jump" to its correct position when the keyboard is closed.

[appelstroop]

@asplundo Yes, we tried with tabs as well, is related to the same issue. With regular ion-input fields it works fine

[jgw96]

Hello everyone! Would you all mind checkout out this doc and try the solution there? Thanks!

[appelstroop]

Thanks @jgw96! This specific wkwebview branch does fix the blur of searchbar :) No white rectangle in iOS.

Unfortunately, this does break hiding keyboard on an ion-scroll subscription. This does often leave a white rectangle in the bottom. See this branch: a ionic-searchbar-bug#wkwebviewfix-scroll-issue

[jgw96]

Ahh good find! At this point I am going to move this issue to the wkwebview repo as this is now an issue with wkwebview. Thanks for using Ionic!

[jgw96]

This issue was moved to ionic-team/cordova-plugin-wkwebview-engine#139

[appelstroop]

@jgw96 @manucorporat This issue was moved to wkwebview, but we do suspect that this is an issue with ionic-angular itself, as it occured only after ionic 3.0.0 version. We found these issues to show the same behaviour:

11251
11291

[Munskin]

Also experiencing this issue since updating to ionic 3.0.0. I'm using a black theme so it's really noticeable.

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.