IOS adds extra space between the status bar and the header screwing the app


#1

The APP has nothing strange. Its all basic components and css. Indeed it works perfectly under android.

But on IOS: simulator and testflight has very strange behavior. Randomly a space between the statusbar and the header appears causing the whole app to shift down.

As you see the footer bar is clipped out of the screen, or the header is pushed out of his place.

This is my config.xml (i removed icon and splash to keep it short=:

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<widget android-versionCode="636" id="XXXX" ios-CFBundleVersion="636" version="1.0.4" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
  <content src="index.html"/>
  <preference name="permissions" value="none"/>
  <preference name="orientation" value="portrait"/>
  <preference name="target-device" value="universal"/>
  <preference name="fullscreen" value="false"/>
  <preference name="webviewbounce" value="false"/>
  <preference name="UIWebViewBounce" value="false"/>
  <preference name="DisallowOverscroll" value="true"/>
  <preference name="prerendered-icon" value="true"/>
  <preference name="stay-in-webview" value="false"/>
  <preference name="ios-statusbarstyle" value="black-opaque"/>
  <preference name="detect-data-types" value="true"/>
  <preference name="exit-on-suspend" value="false"/>
  <preference name="disable-cursor" value="false"/>
  <preference name="android-minSdkVersion" value="19"/>
  <preference name="android-installLocation" value="auto"/>
  <preference name="SplashScreen" value="screen"/>
  <preference name="SplashScreenDelay" value="2000"/>
  <preference name="AutoHideSplashScreen" value="false"/>
  <preference name="ShowSplashScreenSpinner" value="false"/>
  <preference name="SplashMaintainAspectRatio" value="true"/>
  <preference name="FadeSplashScreenDuration" value="300"/>
  <preference name="SplashShowOnlyFirstTime" value="false"/>
  <preference name="windows-target-version" value="8.1"/>
  <preference name="AndroidPersistentFileLocation" value="Compatibility"/>
  <preference name="android-build-tool" value="gradle"/>
  <preference name="BackupWebStorage" value="none"/>
  <preference name="StatusBarOverlaysWebView" value="false"/>
  <preference name="loadUrlTimeoutValue" value="700000"/>
  <preference name="SplashScreenDelay" value="1000"/>
  <preference name="AutoHideSplashScreen" value="true"/>
  <preference name="CordovaWebViewEngine" value="CDVWKWebViewEngine"/>
  <preference name="CordovaWebViewEngine" value="CDVWKWebViewEngine"/>
  <access origin="*"/>
  <access launch-external="true" origin="mailto:*"/>
  <access launch-external="true" origin="tel:*"/>
  <access launch-external="true" origin="sms:*"/>
  <access launch-external="true" origin="geo:*"/>
  <access launch-external="true" origin="maps:*"/>
  <access origin="cdvfile://*"/>
  <allow-intent href="http://*/*"/>
  <allow-intent href="https://*/*"/>
  <allow-intent href="tel:*"/>
  <allow-intent href="sms:*"/>
  <allow-intent href="mailto:*"/>
  <allow-intent href="geo:*"/>
  <allow-intent href="cdvfile://*"/>
  <allow-navigation href="sms:*" launch-external="true"/>
  <allow-navigation href="mailto:*" launch-external="true"/>
  <allow-navigation href="http://ionic.local/*"/>
  <platform name="android">
    <preference name="useBrowserHistory" value="false"/>
    <allow-intent href="market:*"/>
  </platform>
  <platform name="ios">
    <allow-intent href="itms:*"/>
    <allow-intent href="itms-apps:*"/>
    <preference name="FadeSplashScreen" value="true"/>
  </platform>
  <platform name="windows">
    <preference name="WindowsStoreIdentityName" value="CHANGEME"/>
  </platform>
  <splash src="resources/splash.png"/>
  <feature name="Device">
    <param name="ios-package" value="CDVDevice"/>
    <param name="android-package" value="cordova-plugin-device.Device"/>
  </feature>
  <feature name="File">
    <param name="ios-package" value="CDVFile"/>
    <param name="android-package" value="cordova-plugin-file.FileUtils"/>
  </feature>
  <feature name="FileTransfer">
    <param name="ios-package" value="CDVFileTransfer"/>
    <param name="android-package" value="cordova-plugin-filetransfer.FileTransfer"/>
  </feature>
  <feature name="StatusBar">
    <param name="ios-package" onload="true" value="CDVStatusBar"/>
  </feature>
  <feature name="CDVWKWebViewEngine">
    <param name="ios-package" value="CDVWKWebViewEngine"/>
  </feature>
  <feature name="SplashScreen">
    <param name="ios-package" value="CDVSplashScreen"/>
    <param name="onload" value="true"/>
  </feature>
  <feature name="CDVWKWebViewEngine">
    <param name="ios-package" value="CDVWKWebViewEngine"/>
  </feature>  
  <icon src="resources/android/icon/drawable-xhdpi-icon.png"/>
  <engine name="android" spec="^6.2.3"/>
  <plugin name="cordova-plugin-app-version" spec="0.1.9"/>
  <plugin name="cordova-plugin-camera" spec="^2.4.1">
    <variable name="CAMERA_USAGE_DESCRIPTION" value=" "/>
    <variable name="PHOTOLIBRARY_USAGE_DESCRIPTION" value=" "/>
  </plugin>
  <plugin name="cordova-plugin-compat" spec="1.1.0"/>
  <plugin name="cordova-plugin-console" spec="^1.0.7"/>
  <plugin name="cordova-plugin-device" spec="^1.1.6"/>
  <plugin name="cordova-plugin-dialogs" spec="^1.3.3"/>
  <plugin name="cordova-plugin-facebook4" spec="~1.7.4">
    <variable name="APP_ID" value="XXX"/>
    <variable name="APP_NAME" value="XXX"/>
  </plugin>
  <plugin name="cordova-plugin-file" spec="^4.3.3"/>
  <plugin name="cordova-plugin-file-transfer" spec="^1.6.3"/>
  <plugin name="cordova-plugin-geolocation" spec="~2.4.1"/>
  <plugin name="cordova-plugin-google-analytics" spec="^1.8.2"/>
  <plugin name="cordova-plugin-googlemaps" spec="1.4.0">
    <variable name="API_KEY_FOR_ANDROID" value="XX"/>
    <variable name="API_KEY_FOR_IOS" value="XXX"/>
  </plugin>
  <plugin name="cordova-plugin-inappbrowser" spec="^1.7.1"/>
  <plugin name="cordova-plugin-is-debug" spec="1.0.0"/>
  <plugin name="cordova-plugin-splashscreen" spec="~4.0.3"/>
  <plugin name="cordova-plugin-statusbar" spec="^2.2.3"/>
  <plugin name="cordova-plugin-whitelist" spec="^1.3.2"/>
  <plugin name="cordova-plugin-wkwebview-engine" spec="^1.1.3"/>
  <plugin name="cordova.plugins.diagnostic" spec="^3.6.0"/>
  <plugin name="ionic-plugin-keyboard" spec="2.2.1"/>
  <plugin name="onesignal-cordova-plugin" spec="2.0.11"/>
</widget>

#2

You explicitly mention

. This doesn’t happen when testing directly on the device?

What is interesting for the two pages is that the problems seem to be different. The first one adds some margin above the header, the second one pushes the footer/navbar too much down out of the view.

One important information:
You are using WKWebView, correct?
Where did you install the plugin from?
Does it work without WKWebView?

What I would do: Take one of the simpler pages where this happens (no maps, nothing complicated) and rebuild it in a new, blank app until it breaks.


#3

I think the problem is this CSS applied by ionic.

Will try reinstalling WKWebView from github instead of using npm repos.

Actually as device i’ve only IOS9. The problems seems to raise with IOS10.


#4

Note that Ionic is working on its own fork of the wkwebview engine, probably with a good reason: https://github.com/driftyco/cordova-plugin-wkwebview-engine (Don’t know if this is one of them, no experience with WKWebview)

I would try removing it first to see if the stuff is fixed in iOS. Then you know it has something to do with wkwebview and can investigate deeper.


#5

Yup, i’m trying it right now.


#6

Sadly it does not fix the problem. I will try to remove my css or app’s config to see if the problem persist. Then i’ll try to downgrade to latest Ionic2 instead of Ionic3.


#7

so adding to the app’s config: statusbarPadding: false; solve the problem with the “home page”. I just found this settings in the github’s issues. It does not seems to documented in the official doc. I will try now to apply it only to Ios platform instead of android too.

For the map i don’t know what happened but the problems its because the header is transparent. I will try to force it white and with a border bottom to see if it happen again.