Ion-searchbar shows white rectangle on iOS when blurred

[jgw96]

From @appelstroop on May 11, 2017 15:30

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

Copied from original issue: driftyco/ionic#11613

[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?

[jgw96]

From @appelstroop on May 12, 2017 9:15

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!

[jgw96]

From @asplundo on May 12, 2017 10:25

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.

[jgw96]

From @appelstroop on May 12, 2017 11:2

@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!

[jgw96]

From @appelstroop on May 19, 2017 11:0

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!

[manucorporat]

i don't understand the issue, a white rectangle where? gif?

[appelstroop]

Hi @manucorporat,

This issue was moved from Ionic. The wkwebview plugin fixes some keyboard issues, but the following movie shows that ionScroll events leaves a white rectangle where the keyboard was:

https://streamable.com/nopxq

[Allan-Nava]

@appelstroop Hi, I have problem with white screen.. I have a custom jwplayer plugin to show video but when I return on ionic app I got the white screen. No errors, in Android version is working fine.

Best regards

[sylwester-]

Hello @jgw96 - any update on this?

Thanks