bug: Input fields and native scrolling on iOS make content disappear

[dcxn]

Type: Bug
Ionic Version: 1.3.0
iOS version: seen in iPhone 4S, 5 and 5S running 8.4 and 9.3

Short description of the problem:

Using native scrolling in iOS, when an input field on a form loses focus, the content goes white. Happens mostly in smaller screens (like iPhone 4S and 5S) when the content area is big enough to lay under the keyboard open box. Same behavior may also be seen when the input is originally focused for the first time on some iOS versions. Is there a solution for this that lets you keep native scrolling?
If this is a duplicate or there's already solution, link issue please.

Steps to reproduce: Tested on iPhone 5S device

#### Dummy project you can use to test on ios emulators:

https://github.com/dcxn/whitepagebug

[AlDrag]

+1

I get a similar issue. Except that the input I focus on disappears until I start typing. Disabling Native Scrolling fixes this. I guess the only way is to enable native scrolling if Android and disable when iOS platform.

[jgw96]

Hello all! Currently we recommend using javascript scrolling on ios as native scrolling has issues with uiwebview. We are currently working hard towards making wkwebview the standard webview for ionic applications running on ios, which should fix this issue. Sorry! I am going to close this issue for now, but feel free to comment if you have any questions, suggestions etc etc. Thanks for using Ionic!

[dcxn]

Thanks a lot for the answers. Hope this issue may help you guys figure that out.

In the meanwhile, for others struggling with this bug, we temporarily fixed it by adding js scrolling only in the affected view.

[jgw96]

@dcxn No problem and thanks!

[altelante]

Hi,
UIWEBVIEW sucks...
What about @jgw96 comment about integrating with wkwebview? Is there a most recommended way as of today? using Telerik's plugin?

[jgw96]

Hello @altelante! We have some exciting news coming out about this soon, i recommend keeping an eye on our blog in the near future for more info. Thanks!

[SebastianSchirmer]

@jgw96 Eager to hear these news...

[rhazn]

I assume they are talking about using WKWebView, see here: https://docs.google.com/document/d/1LrPDUkfXpqPIsghaSCxHyN1GIZ0TK2bwFxOZx2GKWtI/edit

[SebastianSchirmer]

That would be ionic 2 however and the issue described here would not be resolved

[jgw96]

@leschirmeur while our solution is focused on Ionic 2, we have also assured that it should also work just as well with Ionic 1. Thanks! And as I said, just keep an eye on our blog

[SebastianSchirmer]

@jgw96 will watch the blog then, thanks!

[jgw96]

@leschirmeur Are you still seeing this issue on wkwebview?

[SebastianSchirmer]

@jgw96 Haven't tried, would need to remove our workaround code fragments, then install the wkwebview plugin and test. Will need some time for that. Good point that it might have gone using wkwebview...

[jgw96]

No problem, im testing it myself so ill update with my findings. My hunch is that wkwebview fixes this because it fixes the broken scroll events that are in uiwebview.

[jgw96]

WKWebView seems to fix this in my testing, but I would still recommend using JavaScript scrolling with Ionic 1 on iOS. Thanks for using Ionic! I am going to close this issue for now, but @leschirmeur if you get a chance to test this feel free to comment your results below!

[dcxn]

Hello guys,
i took some time and tested this issue again with WKWebView. In this whitepagebug test project it appears to still be present. Steps to reproduce: tap one of the inputs to give it focus and then the all powerful Bacon button.

On my other app the issue appeared to be solved, although it broke PouchDB - which is another topic already documented afaik.

[diaslane]

Hi guys,
I was working hard on this issue and found a little tricky way to 'solve' it.
What i did was listening to the keyboardhide callback and then show a ionicPopup window and dismiss it immediately. Haven't look deep into the mechanic of ionicPopup, maybe someone could explain and find a better solution to this. Codes below:

$window.addEventListener('native.keyboardhide', function (e) {
var foo = $ionicPopup.show({
title:'',
});
foo.close();
})

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