Ionic-framework: ios11 statusbar regains 20px height during navpop and ion-tab navigation

[KevRyan2]

Resources:
N/A

Ionic version: (check one with "x")
(For Ionic 1.x issues, please use https://github.com/ionic-team/ionic-v1)
[ x ] 2.x
[ ] 3.x
[ ] 4.x

I'm submitting a ... (check one with "x")
[x] bug report
[ ] feature request

Current behavior:
After following everything outlined in this blog post http://blog.ionic.io/ios-11-checklist/ , the status-bar does return to normal (pre iOS11) and allows the header to be fixed to the top of the viewport again (get's rid of the set 20px height with a white background on the status-bar). Bug: when accessing a view with navPop or ion-tabs, after the page resolves the 20px height of the status-bar returns and causes the page to jump down, and all the content to be pushed down by 20px.

Expected behavior:
The status bar would always allow the header to overlay it as it used to, unless defined otherwise by the developer, and not have a defined height with white background as the default.

Steps to reproduce:
Update device to iOS11, update your application and CLI following this blog post http://blog.ionic.io/ios-11-checklist/, navigate the application using a navPop or an ion-tab push.

Related code:
Occurs with both WKWebView and UIWebView

Other information:
This is a largely discussed issue that I expected would be fixed with the recent blog post from ionic ( http://blog.ionic.io/ios-11-checklist/). Some additional discussion surrounding the issue https://issues.apache.org/jira/browse/CB-13273

[Cheney925]

I can confirm that. The same issue with me after I try the steps following http://blog.ionic.io/ios-11-checklist.

[cyberbobjr]

I have exactly the same bug ! but with Ionic v3

[suyaoqu]

I have exactly the same bug ! who can help me

[feimm]

Please install three Cordova plugins：
1、cordova-plugin-disable-ios11-statusbar
2、cordova-plugin-statusbar
3、cordova-plugin-wkwebview-engine

set property：
viewport-fit=cover

[kensodemann]

Hello all, I am planning on trying to duplicate this issue using our conference app but have not had the time yet. If someone could please post a sample app that duplicates this issue (with the iOS-11 mods applied) that we can use as a test-bed to ensure your issue is properly dealt with, that would be greatly appreciated.

[filippodicostanzo]

I have the same issue. Now i try the solution of @feimm

Edit: your solution works perfectly! Thank you

[danielsogl]

Wait for the next Ionic Release with iOS 11 fixes.

https://github.com/ionic-team/ionic/pull/12933

[mlynch]

Possibly relevant cordova issue comment: https://issues.apache.org/jira/browse/CB-12886

[mhartington]

Is there a sample project that someone could provide? I have not been able to reliably recreate this in my test with the conference app

[filippodicostanzo]

If I install this plugin cordova-plugin-wkwebview-engine
i have an issue when call http module only in iOS emulator.

The data doesn't load correctly. so bad

[mhartington]

@filippodicostanzo can you check this doc page?
http://ionicframework.com/docs/wkwebview/

WKWebview enforces CORS, which needs to be implemented on your server

[filippodicostanzo]

@mhartington yes with CORS works now!

Thank You!

[kensodemann]

Can someone please let me know if this is still an issue with [email protected] in combination with the other stuff from the iOS 11 Checklist?

If it is still an issue, can you please provide a sample application via GitHub that we can use to debug and test out the issue? I have not been successful in duplicating this issue. I believe @mhartington also attempted to duplicate and could not.

[legarland]

I don't have a sample project, but I can confirm this issues till exists with [email protected] in my project with "cordova-plugin-statusbar": "git+https://github.com/apache/cordova-plugin-statusbar.git"

[mhartington]

@legarland can you provide a screenshot?

[legarland]

Here is a gif i captured from the iPhone 7 Simulator. This is happening on a device as well.

EDIT: For other plugin compatibility reasons I am using UIWebView and not the WKWebView

[cyberbobjr]

So i've installed :

"cordova-plugin-wkwebview-engine": "git+https://github.com/ionic-team/cordova-plugin-wkwebview-engine.git",
"cordova-plugin-statusbar": "git+https://github.com/apache/cordova-plugin-statusbar.git",

I put this in the index.html in the viewport metadata :
user-scalable=no

In my config.xml i added these lines :

    <preference name="CordovaWebViewEngine" value="CDVWKWebViewEngine" />
    <feature name="CDVWKWebViewEngine">
        <param name="ios-package" value="CDVWKWebViewEngine" />
    </feature>
    <feature name="StatusBar">
        <param name="ios-package" onload="true" value="CDVStatusBar" />
    </feature>

And everything works like a charm !
Many thanks ! :)

[petrot]

@cyberbobjr this is the default config for the plugins. For me, the statusbar dev repo didn't help :(

[cyberbobjr]

If you want, this is my complete package.json :

{
    "name": "Hyphen_blue",
    "author": "Benjamin MARCHAND - Key-conseil.fr",
    "homepage": "https://technique.h2eauassistance.com",
    "version": "1.3.0",
    "private": true,
    "scripts": {
        "clean": "ionic-app-scripts clean",
        "build": "ionic-app-scripts build",
        "ionic:build": "ionic-app-scripts build",
        "ionic:serve": "cross-env NODE_ENV=dev ionic-app-scripts serve -l",
        "ionic:serve:prod": "cross-env NODE_ENV=prod ionic-app-scripts serve -l",
        "build:dev": "cross-env NODE_ENV=dev ionic-app-scripts build ",
        "build:prod": "cross-env NODE_ENV=prod ionic cordova build --codeSignIdentity='iPhone Developer' --prod --release ios",
        "run:prod": "cross-env NODE_ENV=prod ionic cordova run -l --target='iPad-Air-2, 11.0' --prod --release ios",
        "deploy": "npm run build prod && ionic upload --note 'mise à jour 1.3' --prod",
        "update:plugin": "cordova-check-plugins --save",
        "version:patch": "grunt version",
        "resources": "ionic cordova resources"
    },
    "config": {
        "ionic_webpack": "./config/webpack.config.js",
        "ionic_source_map": "source-map"
    },
    "dependencies": {
        "@agm/core": "^1.0.0-beta.1",
        "@angular/common": "4.1.3",
        "@angular/compiler": "4.1.3",
        "@angular/compiler-cli": "4.1.3",
        "@angular/core": "4.1.3",
        "@angular/forms": "4.1.3",
        "@angular/http": "4.1.3",
        "@angular/platform-browser": "4.1.3",
        "@angular/platform-browser-dynamic": "4.1.3",
        "@ionic-native/core": "3.12.1",
        "@ionic-native/in-app-browser": "^4.2.1",
        "@ionic-native/launch-navigator": "^4.2.1",
        "@ionic-native/network": "^3.6.1",
        "@ionic-native/secure-storage": "^3.4.4",
        "@ionic-native/splash-screen": "3.12.1",
        "@ionic-native/status-bar": "3.12.1",
        "@ionic/cloud-angular": "^0.12.0",
        "@ionic/storage": "2.0.1",
        "@types/node": "^8.0.26",
        "angular2-jwt": "^0.1.25",
        "angular2-uuid": "^1.1.0",
        "cordova-android": "^6.2.3",
        "cordova-browser": "^4.1.0",
        "cordova-ios": "^4.4.0",
        "cordova-plugin-add-swift-support": "^1.7.0",
        "cordova-plugin-device": "^1.1.6",
        "cordova-plugin-dialogs": "^1.3.3",
        "cordova-plugin-googlemaps-sdk": "git+https://github.com/mapsplugin/cordova-plugin-googlemaps-sdk.git",
        "cordova-plugin-inappbrowser": "^1.7.1",
        "cordova-plugin-ionic": "^1.1.9",
        "cordova-plugin-network-information": "^1.3.3",
        "cordova-plugin-secure-storage": "^2.6.8",
        "cordova-plugin-splashscreen": "^4.0.3",
        "cordova-plugin-statusbar": "git+https://github.com/apache/cordova-plugin-statusbar.git",
        "cordova-plugin-whitelist": "^1.3.2",
        "cordova-plugin-wkwebview-engine": "git+https://github.com/ionic-team/cordova-plugin-wkwebview-engine.git",
        "cross-env": "^5.0.5",
        "intl": "^1.2.5",
        "ionic-angular": "3.6.1",
        "ionic-plugin-deploy": "^0.6.7",
        "ionic-plugin-keyboard": "^2.2.1",
        "ionicons": "3.0.0",
        "lodash": "^4.17.4",
        "moment": "^2.18.1",
        "ng-lazyload-image": "^3.3.1",
        "ng2-auto-complete": "^0.12.0",
        "ng2-completer": "^1.6.2",
        "rxjs": "5.4.3",
        "sw-toolbox": "3.6.0",
        "uk.co.workingedge.phonegap.plugin.launchnavigator": "^4.0.5",
        "zone.js": "^0.8.12"
    },
    "devDependencies": {
        "@ionic/app-scripts": "2.1.4",
        "grunt": "^1.0.1",
        "grunt-bump": "^0.8.0",
        "grunt-cli": "^1.2.0",
        "grunt-contrib-copy": "^1.0.0",
        "grunt-execute": "^0.2.2",
        "typescript": "2.3.4"
    },
    "description": "Hyphen Blue",
    "cordova": {
        "plugins": {
            "cordova-plugin-device": {},
            "cordova-plugin-splashscreen": {},
            "cordova-plugin-whitelist": {},
            "ionic-plugin-keyboard": {},
            "uk.co.workingedge.phonegap.plugin.launchnavigator": {
                "LOCATION_USAGE_DESCRIPTION": "This app requires access to your location for navigation purposes"
            },
            "cordova-plugin-inappbrowser": {},
            "cordova-plugin-network-information": {},
            "cordova-plugin-secure-storage": {},
            "ionic-plugin-deploy": {},
            "cordova-plugin-statusbar": {},
            "cordova-plugin-wkwebview-engine": {},
            "cordova-plugin-ionic": {
                "APP_ID": "xxxxxxx",
                "CHANNEL_NAME": "Master",
                "UPDATE_METHOD": "auto",
                "UPDATE_API": "https://api.ionicjs.com",
                "MAX_STORE": "2"
            }
        },
        "platforms": [
            "android",
            "browser",
            "ios"
        ]
    }
}

[kensodemann]

@cyberbobjr - did you install the cordova-plugin-ionic-webview? I had a sample app that was showing this behavior and then the issue went away after installing that plugin.

[petrot]

No, I have https://github.com/ionic-team/cordova-plugin-wkwebview-engine.git ....
I try the other webview, thanks!

[legarland]

@kensodemann I installed the cordova-plugin-ionic-webview and it worked well with ionic serve but i'm getting duplicate symbol errors when trying to build for ios.

[kensodemann]

@legarland - what version if cordova-ios are you building with? If you are using 4.5.x you will need to be sure to remove cordova-plugin-console as per this announcement: http://cordova.apache.org/news/2017/09/22/plugins-release.html

[johnellmore]

I'm having exact same issue as @legarland (delayed jumpy gap appearing just below the header bar shortly after a view change).

For what it's worth, I've noticed that altering the top style property on .scroll-content containers seems to remove the gap if that code is executed after the view is loaded. The property is normally 0. For example, run this in the Safari inspector when connected to the app in iOS:

document.querySelectorAll('.scroll-content').forEach(e => {e.style.top = "1px";});

This isn't a fix, since it doesn't remove the jumpiness and it doesn't maintain the correct value 0. But it appears that altering that property causes a reflow which corrects the issue. Maybe this helps someone get a little closer to the solution?

[plindsay]

Hi all, I see not enough padding at the top of my app in iOS11 -
https://www.evernote.com/l/AAXmo1DP0blGrpfL1spalO1z9u7s-6P4BDM

Navigation is too cramped and often the back button doesn't register a tap unless you catch the very bottom of the icon.

Additionally the message box show in the screenshot is within an <ion-footer> and it seems to have the lost some padding at the bottom and it's top border...

Here is a screenshot from Chrome to show how it should look -
https://www.evernote.com/l/AAU2I05Dn2RPzLrA0DhOdaA8XqcnguIw56E

I'm using :

• WkWebView
• "cordova-plugin-statusbar": "git+https://github.com/apache/cordova-plugin-statusbar.git"
• viewport-fit=cover in the meta tag of index.html
• "ionic-angular": "3.7.1",

[kensodemann]

@plindsay - would you be able to share some sample code that demonstrates this issue?

Also, you should probably create your own issue with the sample code. I am not sure your issue exactly relates to the originally posted issue.

[KevRyan2]

UPDATE on this issue since I originated this thread. I switched to WKWebView and updated to iOS
11.0.1 which served as a good solution to the status-bar issues. HOWEVER, our application uses video playback, which is still (somehow) not compatible with AVAudioSessions in WKWebView. Therefore, we're forced to return to UIWebView until whenever WKWebView gets around to fixing that.

The original issue, displayed perfectly by @legarland , still exists, so this is an ongoing issue. Has anybody found a solution for this that supports UIWebView or has this bug been assigned to anyone yet?

[kensodemann]

@KevRyan2 - regarding the main issue itself, @mhartington has been working through several iOS 11 related issues. He just posted this nightly: npm i [email protected] if you want to try it in your project and let me know if it addresses the original issue.

[KevRyan2]

thanks @kensodemann ! hoping this works, will post a response in this thread as soon as I get this up and running

[mlynch]

@KevRyan2 which WKWebView plugin are you using? We addressed some video issues in our plugin. The core Cordova doesn't have this fix AFAIK

[KevRyan2]

@mlynch I tried to use the ionic version of the plugin which seemed to have fixes a lot of other issues (including the CORS problem) (https://github.com/ionic-team/cordova-plugin-wkwebview-engine.git), but this issue still seemed to persist: Start playing music (ex. using Spotify), enter our application, click through to a page with an html5 video tag playing an inline, looping mp4 file with no sound. When the video initializes, the music stops entirely and doesn't share the audio session. Separate area of the application, there are also short audio clips that play, and those also completely stop the background music. It's essential for us that the background music continues (fitness based application), so we couldn't operate without that. I noticed that [AVAudioSessionCategoryOptionMixWithOthers] was added with this version of WkWebView, but it still seemed to not solve the issue.

[mlynch]

@KevRyan2 got it, thanks. btw new plugin is here, I forget if there are more fixes in it but @manucorporat would know: https://github.com/ionic-team/cordova-plugin-ionic-webview

[KevRyan2]

@kensodemann , after updating to the version [email protected] that @mhartington pushed out and rebuilding the application this issue does still remain unfortunately. I'd like to add for clarification that for some reason it only occurs with UIWebView on NavPop and ion-tab navigation. When using a NavPush everything works normally with the statubar and the page doesn't jump or apply extra padding. Also worth noting that I've tried adding viewport-fit=cover to meta viewport and using cordova-plugin-disable-ios11-statusbar and neither has worked with UIWebView

[kensodemann]

@KevRyan2 - I discussed some of this with @mhartington. We believe the underlying issue is caused by a bug in UIWebView. Just to clarify, if you use WKWebView you do not have this issue on NavPop and ion-tab navigation - only with UIWebView. Correct? But then you have the audio issue.

[KevRyan2]

@kensodemann - That's correct, WKWebView doesn't experience this navigation issue whatsoever. Unfortunately as you stated there, the WKWebView bug prevents a p0 functionality of our application so we have to use UIWebView for now. Which means we can't release a new version of our app yet with this navigation bug, so definitely hoping you guys are able to come up with a fix for this 👍

[KevRyan2]

@mlynch apologies, I double checked and I actually was using the plugin you listed there (https://github.com/ionic-team/cordova-plugin-ionic-webview) when I was experiencing the issues with AvAudioSessions and WKWebView. I was just using the plugin that I included (https://github.com/ionic-team/cordova-plugin-wkwebview-engine.git) to support it

[mhartington]

@KevRyan2 The UIWebview issue is related to an actual bug in in iOS. With Apple being very picky about how you can modify things, and I think patching UIWebview would be against their rules.

I don't think the version of the wkwebvie plugin has any AVAudioSession, so we might need to add something like

[[AVAudioSession sharedInstance] setCategory:AVAudioSessionCategoryPlayAndRecord 
                                 withOptions:AVAudioSessionCategoryOptionMixWithOthers
                                       error:&error];

[KevRyan2]

@mhartington I was afraid of that, really appreciate you guys putting in a lot of effort here. So you’re thinking it might be most effective for me to stick with WkWebView and wait for a solution on the AVAudioSession right?

[mhartington]

I'll chat with @manucorporat in the morning regarding that snippet and see what his thoughts are. I'll share more then.

[KevRyan2]

@mhartington thanks that's very much appreciated 👍

[plindsay]

@kensodemann I've just rebuilt the app with Xcode 9 and all seems fine now with the status bar and footer (no changes to the code) 👍 I can only imagine it was an Xcode 8 bug...

[mhartington]

@KevRyan2 can you try adding this new release of the wkwebview plugin?

https://github.com/ionic-team/cordova-plugin-ionic-webview

We've added a config to allow you to mix the audio settings at the native level.

After you install the plugin, add

<preference name="AudioCanMix" value="true" />

To your config.xml and rebuild.

[KevRyan2]

@mhartington thank you for that hotfix, but unfortunately after adding that plugin and additional preference, rebuilding, and deploying, the video and audio playback on WkWebView still cancels the background music. I tried a few different configurations, but both html5 videos (without any sound component) and html audio clips (of about 500ms duration) still cancel the background music completely.

One interesting note: any videos played through the https://github.com/nchutchind/cordova-plugin-streaming-media plugin actually manage to share the AVAudioSession and lower the volume on the background music properly on WkWebView, I believe by utilizing the native mediaplayer. However, that plugin has very limited capabilities on top of requiring fullscreen playback so it's not useful in most cases; I just thought it might help further debug the issue here.

[mhartington]

Hmm, could you provide a small example app so that @manucorporat and myself could debug this

[bentzibentz]

tried every solution mentioned above but the "delayed jumpy gap appearing just below the header bar shortly after a view change" is still there. Any other solutions?

[mhartington]

@bentzibentz Please make sure your are using WKWebview. If you are, please provide a sample project that recreates this issue

[KevRyan2]

@mhartington working on this WkWebView bug right now on our side of things to narrow down the issue.. we have a very intricate application which would would be hard to duplicate in a sample app so first we wanted to try it this way. It looks like when WKWebView loads any video file (using the GCDWebServer) it breaks the pipe in this manner (https://stackoverflow.com/questions/35588073/gcdwebserver-for-streaming)... the video eventually loads, but we believe because of this initial error the content type is unknown and therefore can't share the session with the background music. I will circle back as soon as we look more into this GCDWebServer bug, which will isolate the recent fix you guys made

[uniphonic]

@mhartington I hope that WKWebView is not the only supported solution now? I've tried WKWebView, and it does seem to get rid of the "delayed jumpy gap" after view change, but it causes CORS issues with the web service we're using which my team has been unable to resolve yet. I'm currently trying out the native http plugin, mentioned at http://blog.ionic.io/wkwebview-for-all-a-new-webview-for-ionic/ , but I haven't been able to get it to work yet. It would be preferable for us to to continue to use the UIWebView with our app as we had been previously, but this "jumpy gap" is the only thing thats currently preventing us from deploying an update of our app to the App Store.

[giltotherescue]

I am not sure if this is the same issue, but I am noticing a new problem after upgrading to the latest version of Ionic including WKwebview. I took a video to show what I mean: https://cl.ly/2X3l3C1e2H1v (video taken on iPhone 7 simulator, but on device it looks the same)

This surfaces in several ways:

1) When the app first opens, there is a white space at the very top
2) When the side menu opens for the first time, the contents are pushed a little too high and the top nav item is not visible (this goes away after the first time the menu is opened)
3) When I navigate to new pages, as visible in the demo, there is a jumping effect, and sometimes a white bar at the top.

```cli packages: (/Users/xander/Sites/powermonkey/PM-Mobile/node_modules)

@ionic/cli-utils  : 1.12.0
ionic (Ionic CLI) : 3.12.0

global packages:

cordova (Cordova CLI) : 7.0.1

local packages:

@ionic/app-scripts : 3.0.0
Cordova Platforms  : android 6.2.3 ios 4.4.0
Ionic Framework    : ionic-angular 3.7.1

System:

Android SDK Tools : 25.2.5
ios-deploy        : 1.9.2 
ios-sim           : 5.0.11 
Node              : v6.9.4
npm               : 4.6.1 
OS                : macOS Sierra
Xcode             : Xcode 9.0 Build version 9A235

Misc:

backend : pro

cordova-plugin-add-swift-support 1.7.0 "AddSwiftSupport"
cordova-plugin-device 1.1.6 "Device"
cordova-plugin-facebook4 1.9.1 "Facebook Connect"
cordova-plugin-inappbrowser 1.7.1 "InAppBrowser"
cordova-plugin-inapppurchase 1.1.0 "In App Purchase"
cordova-plugin-intercom 4.0.0 "Intercom"
cordova-plugin-ionic 1.1.9 "IonicCordova"
cordova-plugin-splashscreen 4.0.3 "Splashscreen"
cordova-plugin-statusbar 2.2.3 "StatusBar"
cordova-plugin-whitelist 1.3.2 "Whitelist"
cordova-plugin-wkwebview-engine 1.1.3 "Cordova WKWebView Engine"
cordova-plugin-x-socialsharing 5.1.8 "SocialSharing"
cordova-plugin-youtube-video-player 1.0.6 "CordovaYoutubeVideoPlayer"
es6-promise-plugin 4.1.0 "Promise"
ionic-plugin-keyboard 2.2.1 "Keyboard"

```

[mhartington]

@KevRyan2 I'll have @manucorporat take a look

@uniphonic UIWebview has an actual bug in it, which is the underlying cause of the issue. Being that the code for UIWebview is internal to iOS, we cannot patch it. So yes, WKWebview is the solution for now.

but it causes CORS issues with the web service we're using which my team has been unable to resolve yet

So a solid option if you can't modify your webservice to implement CORS is to create a simple middle ware that will act as a proxy for your request. This middleware can implement CORs correctly and just pass the request back to your original web service.

@giltotherescue Can you please provide a small isolated demo that replicates this error for us to test against?

[KevRyan2]

@mhartington thank you, looking forward to hearing about that. On the note of the UIWebView status bar bug I’ve submitted a bug report to Apple but I won’t hold my breath seeing as it was through the regular channels

[christianwico]

I very much think WKWebView will fix the issue. But please... Anything else? The CORS issue of WKWebView is something I cannot give a workaround for. I've tried the viewport thing, and updating to a PR of cordova-plugin-statusbar but to no avail.

[thessler27]

@mhartington I've been doing a bunch of research on this and it seems like Apple does not allow access to the AVAudioSession on the WKWebview thread. Initializing HTML5 Audio and HTML5 Video that includes an audio track pauses any background music. You can get around the HTML5 video issue by applying a defaultMuted attribute to the <video> element in the HTML file (assuming you don't want to play that video with sound inline).
The way to get HTML5 Audio this is to implement either cordova-plugin-media or cordova-plugin-native-audio. for your audio file implementation so we can utilize the main thread and control the AVAudioSession. I have forked cordova-plugin-media here which includes a parameter audioSessionOpts:String that you can pass to the media object when implementing the play method (and ultimately the active AVAudioSession) that will add ducking and mixing options to the session. These options are listed here by apple. I also found that continuing a category is also an important functionality, so I provided an option usePreviousAudioOpts:string which, when set equal to 'true' will continue whatever audio categories you have previously set.

This approach has worked well for me. Thanks for all of your help.

[KevRyan2]

thanks for working through that @thessler27 this will help a lot of people

[mhartington]

Thanks for the info @thessler27 ! Super helpful.

Since the original problem with this issue has been address (the extra padding) I'm going to close this issue.

For any one who gets here in their google'ing, if you're still facing an issue, please open an issue on the wkwebview repo

https://github.com/ionic-team/cordova-plugin-ionic-webview

Thanks yall!

[KevinFu]

solve the problem by using cordova-plugin-ionic-webview

[mvonlintel]

I was able to get this to work using UIWebView.

body { padding-top: constant(safe-area-inset-top); }

https://stackoverflow.com/questions/46232812/cordova-app-not-displaying-correctly-on-iphone-x-simulator

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