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

badpenguin · May 22, 2017, 4:35pm

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>

Sujan12 · May 22, 2017, 4:40pm

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.

badpenguin · May 22, 2017, 4:50pm

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.

Sujan12 · May 22, 2017, 4:56pm

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.

badpenguin · May 22, 2017, 4:58pm

Yup, i’m trying it right now.

badpenguin · May 22, 2017, 5:31pm

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.

badpenguin · May 22, 2017, 6:03pm

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.