Ionic app black screen on iOS


#1

The app works perfectly on the web, but once I build it on iOS after login app just shows the black screen. And once I tap on where the tabs bar supposed to be it appears but content still black. What could be an issue for this?
It worked perfectly just a couple days before :smiley: and yes, I tried safari development tool, there’s no any erros or something. Super weird
:face_with_raised_eyebrow:


#2

Can you inspect the “black area” with dev tools?


#3

For some reason it’s empty


#4

It would be inside <body>...</body>


#5

yeah but it is empty… :confused:
53


#6

maybe it’s affected by the iOS update i did today…


#7

What is you ionic info output?
Any errors in Console or Network tab?


#8
    @ionic/cli-utils  : 1.9.2
    ionic (Ionic CLI) : 3.9.2

global packages:

    Cordova CLI : 7.0.1 

local packages:

    @ionic/app-scripts : 2.1.4
    Cordova Platforms  : ios 4.4.0
    Ionic Framework    : ionic-angular 3.6.0

System:

    ios-deploy : 1.9.2 
    Node       : v6.11.1
    npm        : 5.3.0 
    OS         : macOS Sierra
    Xcode      : Xcode 9.0 Build version 9A235 


No any errors in the developer console. Even the network tab is empty even though It’s supposed to receive data from API.


#9

Post the content of the loaded index.html please.
How did you build the app?


#10

index.html

`<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
  <title>Ionic App</title>
  <meta name="viewport" content="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">
  
   <meta http-equiv="Content-Security-Policy" content="img-src * 'self' data:; default-src * 'self' gap: wss: ws: ; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval';"> 

  <link rel="icon" type="image/x-icon" href="assets/icon/favicon.ico">
  <link rel="manifest" href="manifest.json">
  <meta name="theme-color" content="#4e8ef7">
  <!-- Font -->
 <link href="https://fonts.googleapis.com/css?family=Yantramanav:100,300,400,500" rel="stylesheet">
 
  <!-- cordova.js required for cordova apps -->
  <script src="Cordova.js"></script>

 

  <link href="build/main.css" rel="stylesheet">

</head>
<body>

  <!-- Ionic's root component and where the app will load -->
  <ion-app></ion-app>

  <!-- The polyfills js is generated during the build process -->
  <script src="build/polyfills.js"></script>

  <!-- Charts plugin -->
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.js"></script>


    <script src="build/vendor.js"></script>


  <!-- The bundle js is generated during the build process -->
  <script src="build/main.js"></script>


</body>
</html>
`

Just figured it out that one of the page is displaying once I click on the of it’s tab. So one for 4 page’s is showing … super weird.

I just runing ionic cordova build -ios