bug: NavController Present Modal not overlaying content

[qorsmond]

Type: bug

Ionic Version: 2.x

Platform: mobile webview

When trying to display a modal using nav.present(myModal) the screen goes blank when testing in the browser emulating IOS it shows correctly when emulating Android.

But when testing on the device itself with Android 5.1 the modal is not shown. When I tap on the screen where the inputs should be located it seems that the inputs of the modal gets focus because the keyboard opens but you can’t see the inputs because the modal is hidden.

I tried to create a code pen but not so sure how to do it for ionic2. I did make a gist: https://gist.github.com/qorsmond/0fda766a2091431bc80e

ionic info:

Cordova CLI: 6.0.0
Gulp version: CLI version 3.9.0
Gulp local:
Ionic Version: 2.0.0-beta.0
Ionic CLI Version: 2.0.0-beta.17
Ionic App Lib Version: 2.0.0-beta.8
OS: Node Version: v5.6.0

[qorsmond]

Here are gif's to try to show what I meant:

Working; emulating Android in chrome:

Not showing modal; emulating IOS in chrome:

I also encountered the exact same as #5484

[adamdbradley]

Thanks for the report, we'll take a look and try to get this fixed up.

[adamdbradley]

Have you tried removing the autofocus from the ion-input? I understand it should autofocus when it comes up, but I'm just trying to narrow down what's causing it.

[qorsmond]

Just tried it and removing the autofocus from the ion-input did the trick! Maybe it is the Chrome IOS emulator causing the issue? Not able to test directly on IOS.

[adamdbradley]

Great thanks, i just made some changes so autofocus doesn't get added to the native input element directly, but let's ionic control how to autofocus.