Lightrun
question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

iOS 11 update, adding viewport-fit=cover makes the whole app blank.

See original GitHub issue

I’m working with iPhone 7 plus with iOS 11. After updating to iOS 11, I’ve following the instructions noted at https://blog.ionic.io/ios-11-checklist/, and when I added viewport-fit=cover to my index.html, the whole App loads blank without any apparent errors. Below you will find my Ionic Info, index.html and config.xml for reference.

My ionic info: cli packages: @ionic/cli-utils : 1.13.1 ionic (Ionic CLI) : 3.13.2

global packages: cordova (Cordova CLI) : 7.0.1

local packages: @ionic/app-scripts : 2.1.3 Cordova Platforms : ios 4.4.0 Ionic Framework : ionic-angular 3.7.1

System: ios-deploy : 1.9.0 ios-sim : 5.0.12 Node : v7.10.0 npm : 4.2.0 OS : macOS Sierra Xcode : Xcode 9.0 Build version 9A235

Misc: backend : legacy

My Index.html:

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="UTF-8">
  <title>Ionic App</title>
 <meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> 
  <meta name="format-detection" content="telephone=no">
  <meta name="msapplication-tap-highlight" content="no">
  <link rel="icon" type="image/x-icon" href="assets/icon/favicon.ico">
  <link rel="manifest" href="manifest.json">
  <meta name="theme-color" content="#4e8ef7">
  <script src="https://maps.googleapis.com/maps/" async defer></script>
  <script src="cordova.js"></script>
  <link href="assets/css/font-awesome.min.css" rel="stylesheet">
  <link href="build/main.css" rel="stylesheet">
</head>
<body>
  <ion-app></ion-app>
  <script src="build/polyfills.js"></script>
  <script src="build/vendor.js"></script>
  <script src="build/main.js"></script>
  <script src="/assets/js/web-animations.min.js"></script>
</body>
</html>

And here is my config.xml:

<?xml version='1.0' encoding='utf-8'?>
<widget id="com.ionicframework" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
    <name>App</name>
    <description>An awesome Ionic/Cordova app.</description>
    <author email="hi@ionicframework" href="http://ionicframework.com/">Ionic Framework Team</author>
    <content src="index.html" />
    <access origin="*" />
    <allow-navigation href="http://ionic.local/*" />
    <allow-intent href="http://*/*" />
    <allow-intent href="https://*/*" />
    <allow-intent href="tel:*" />
    <allow-intent href="sms:*" />
    <allow-intent href="mailto:*" />
    <allow-intent href="geo:*" />
    <platform name="android">
        <allow-intent href="market:*" />
        <icon density="ldpi" src="resources/android/icon/drawable-ldpi-icon.png" />
        <icon density="mdpi" src="resources/android/icon/drawable-mdpi-icon.png" />
        <icon density="hdpi" src="resources/android/icon/drawable-hdpi-icon.png" />
        <icon density="xhdpi" src="resources/android/icon/drawable-xhdpi-icon.png" />
        <icon density="xxhdpi" src="resources/android/icon/drawable-xxhdpi-icon.png" />
        <icon density="xxxhdpi" src="resources/android/icon/drawable-xxxhdpi-icon.png" />
        <splash density="land-ldpi" src="resources/android/splash/drawable-land-ldpi-screen.png" />
        <splash density="land-mdpi" src="resources/android/splash/drawable-land-mdpi-screen.png" />
        <splash density="land-hdpi" src="resources/android/splash/drawable-land-hdpi-screen.png" />
        <splash density="land-xhdpi" src="resources/android/splash/drawable-land-xhdpi-screen.png" />
        <splash density="land-xxhdpi" src="resources/android/splash/drawable-land-xxhdpi-screen.png" />
        <splash density="land-xxxhdpi" src="resources/android/splash/drawable-land-xxxhdpi-screen.png" />
        <splash density="port-ldpi" src="resources/android/splash/drawable-port-ldpi-screen.png" />
        <splash density="port-mdpi" src="resources/android/splash/drawable-port-mdpi-screen.png" />
        <splash density="port-hdpi" src="resources/android/splash/drawable-port-hdpi-screen.png" />
        <splash density="port-xhdpi" src="resources/android/splash/drawable-port-xhdpi-screen.png" />
        <splash density="port-xxhdpi" src="resources/android/splash/drawable-port-xxhdpi-screen.png" />
        <splash density="port-xxxhdpi" src="resources/android/splash/drawable-port-xxxhdpi-screen.png" />
    </platform>
    <platform name="ios">
        <allow-intent href="itms:*" />
        <allow-intent href="itms-apps:*" />
        <icon height="57" src="resources/ios/icon/icon.png" width="57" />
        <icon height="114" src="resources/ios/icon/icon@2x.png" width="114" />
        <icon height="40" src="resources/ios/icon/icon-40.png" width="40" />
        <icon height="80" src="resources/ios/icon/icon-40@2x.png" width="80" />
        <icon height="120" src="resources/ios/icon/icon-40@3x.png" width="120" />
        <icon height="50" src="resources/ios/icon/icon-50.png" width="50" />
        <icon height="100" src="resources/ios/icon/icon-50@2x.png" width="100" />
        <icon height="60" src="resources/ios/icon/icon-60.png" width="60" />
        <icon height="120" src="resources/ios/icon/icon-60@2x.png" width="120" />
        <icon height="180" src="resources/ios/icon/icon-60@3x.png" width="180" />
        <icon height="72" src="resources/ios/icon/icon-72.png" width="72" />
        <icon height="144" src="resources/ios/icon/icon-72@2x.png" width="144" />
        <icon height="76" src="resources/ios/icon/icon-76.png" width="76" />
        <icon height="152" src="resources/ios/icon/icon-76@2x.png" width="152" />
        <icon height="167" src="resources/ios/icon/icon-83.5@2x.png" width="167" />
        <icon height="29" src="resources/ios/icon/icon-small.png" width="29" />
        <icon height="58" src="resources/ios/icon/icon-small@2x.png" width="58" />
        <icon height="87" src="resources/ios/icon/icon-small@3x.png" width="87" />
        <splash height="1136" src="resources/ios/splash/Default-568h@2x~iphone.png" width="640" />
        <splash height="1334" src="resources/ios/splash/Default-667h.png" width="750" />
        <splash height="2208" src="resources/ios/splash/Default-736h.png" width="1242" />
        <splash height="1242" src="resources/ios/splash/Default-Landscape-736h.png" width="2208" />
        <splash height="1536" src="resources/ios/splash/Default-Landscape@2x~ipad.png" width="2048" />
        <splash height="2048" src="resources/ios/splash/Default-Landscape@~ipadpro.png" width="2732" />
        <splash height="768" src="resources/ios/splash/Default-Landscape~ipad.png" width="1024" />
        <splash height="2048" src="resources/ios/splash/Default-Portrait@2x~ipad.png" width="1536" />
        <splash height="2732" src="resources/ios/splash/Default-Portrait@~ipadpro.png" width="2048" />
        <splash height="1024" src="resources/ios/splash/Default-Portrait~ipad.png" width="768" />
        <splash height="960" src="resources/ios/splash/Default@2x~iphone.png" width="640" />
        <splash height="480" src="resources/ios/splash/Default~iphone.png" width="320" />
        <icon height="1024" src="resources/ios/icon/icon-1024.png" width="1024" />
        <splash height="2732" src="resources/ios/splash/Default@2x~universal~anyany.png" width="2732" />
    </platform>
    <preference name="FadeSplashScreen" value="false" />
    <preference name="AutoHideSplashScreen" value="false" />
    <preference name="ShowSplashScreen" value="false" />
    <preference name="ShowSplashScreenSpinner" value="false" />
    <preference name="webviewbounce" value="false" />
    <preference name="UIWebViewBounce" value="false" />
    <preference name="DisallowOverscroll" value="true" />
    <preference name="android-minSdkVersion" value="18" />
    <preference name="BackupWebStorage" value="none" />
    <preference name="SplashMaintainAspectRatio" value="true" />
    <preference name="FadeSplashScreenDuration" value="0" />
    <preference name="SplashShowOnlyFirstTime" value="false" />
    <preference name="orientation" value="portrait" />
    <preference name="AllowInlineMediaPlayback" value="false" />
    <preference name="MediaPlaybackRequiresUserAction" value="true" />
    <preference name="SplashScreen" value="none" />
    <preference name="SplashScreenDelay" value="0" />
    <feature name="StatusBar">
        <param name="ios-package" onload="true" value="CDVStatusBar" />
    </feature>
    <icon src="resources/ios/icon/icon-small@3x.png" />
    <plugin name="cordova-plugin-background-mode" spec="^0.7.2" />
    <plugin name="cordova-plugin-badge" spec="^0.8.1" />
    <plugin name="cordova-plugin-console" spec="1.0.5" />
    <plugin name="cordova-plugin-device" spec="1.1.4" />
    <plugin name="cordova-plugin-fcm" spec="^2.1.2" />
    <plugin name="cordova-plugin-file-transfer" spec="~1.6.2" />
    <plugin name="cordova-plugin-geolocation" spec="~2.4.1" />
    <plugin name="cordova-plugin-http" spec="~1.2.0" />
    <plugin name="cordova-plugin-nativeaudio" spec="^3.0.9" />
    <plugin name="cordova-plugin-nativegeocoder" spec="^2.0.2" />
    <plugin name="cordova-plugin-network-information" spec="~1.3.3" />
    <plugin name="cordova-plugin-secure-storage" spec="^2.6.8" />
    <plugin name="cordova-plugin-splashscreen" spec="~4.0.1" />
    <plugin name="cordova-plugin-statusbar" spec="2.2.1" />
    <plugin name="cordova-plugin-stripe" spec="~1.4.0" />
    <plugin name="cordova-plugin-vibration" spec="^2.1.5" />
    <plugin name="cordova-plugin-whitelist" spec="1.3.1" />
    <plugin name="cordova-sqlite-storage" spec="~2.0.2" />
    <plugin name="ionic-plugin-keyboard" spec="~2.2.1" />
    <engine name="ios" spec="^4.4.0" />
</widget>

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Reactions:1
  • Comments:11 (5 by maintainers)

github_iconTop GitHub Comments

1reaction
dimitri320commented, Oct 30, 2017

My bad, editing the wrong index.html file! Now all is good!

0reactions
ionitron-bot[bot]commented, Sep 29, 2018

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.

Read more comments on GitHub >

github_iconTop Results From Across the Web

iOS 11 update, adding viewport-fit=cover makes the whole ...
I'm working with iPhone 7 plus with iOS 11. After updating to iOS 11, I've following the instructions noted at ...
Read more >
Cordova app not displaying correctly on iPhone X (Simulator)
In my case, when I added viewport-fit=cover my whole app just shows a blank white screen and nothing else. I'm using iOS11, Xcode9...
Read more >
About iOS 16 Updates
About iOS 16 Updates · iOS 16.2. This update introduces Freeform, an app that offers a great place to brainstorm and bring your...
Read more >
Supporting iPhone X for mobile web & Cordova app using ...
PART I: Creating Native-like Web Apps for iPhone X; PART II: ... The viewport does not cover the whole screen, creating the blank...
Read more >
Removing the White Bars in Safari on iPhone X
To accommodate the notch iOS 11 constrains websites within a "safe area" ... Simply adding viewport-fit=cover to your viewport meta tag will ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found
Previous page

Wrong border-bottom of the last <ion-input> inside a <ion-list>

Next page

Failed to fetch plugin git+ssh://git@ ... .git via registry