Modals broken after adding viewport-fit=cover for iPhone X

[drewrygh]

Short description of the problem:

After adding the viewport-fit=cover field to the meta tag, modals and action sheets do not display on iOS 11 or higher. The modal does not display, but the backdrop is still active. The body gets the modal-open class, and the modal instance can be still be closed, so it's entirely a css issue. If you inspect the rule '.action-sheet-backdrop', '.modal-backdrop' and uncheck position:fixed, the modals and action sheets display properly.

Steps to reproduce:

1. Clone this repo I created to demonstrate the problem based on the tabs started. Note the: <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width, viewport-fit=cover"> in index.html
2. Add iOS platform etc.
3. Run on a device running iOS 11
4. Click the button to open the modal — the modal backdrop freezes the UI.

Which Ionic Version? 1.3.5

Ionic Info Output:

cli packages: (/usr/local/lib/node_modules)

    @ionic/cli-utils  : 1.16.0
    ionic (Ionic CLI) : 3.16.0

global packages:

    cordova (Cordova CLI) : 7.1.0
    Gulp CLI              : CLI version 3.9.1 Local version 3.9.1

local packages:

    Cordova Platforms : ios 4.5.3
    Ionic Framework   : ionic1 1.3.5

System:

    Android SDK Tools : 26.0.2
    ios-sim           : 6.0.0
    Node              : v6.11.0
    npm               : 3.10.10
    OS                : macOS Sierra
    Xcode             : Xcode 9.0.1 Build version 9A1004

Environment Variables:

    ANDROID_HOME : /Users/drew/Library/Android/sdk

Misc:

    backend : pro

[mhartington]

This issue is because of the statusbar plugin. The sample repo you sent me included the stable release of the statusbar. In our iOS11 blog post, we mention you need to pull the nightly statusbar for now, until the plugin release has been done.

Before

After