Ionic-framework: White screen on iOS 10 (new)

Created on 25 Jun 2016  路  14Comments  路  Source: ionic-team/ionic-framework

Short description of the problem:

Complete White Screen on app loads (without topbar)

What behavior are you expecting?

The Splashscreen shows, but after appears the white screen and the app doesn't works

Steps to reproduce:

  1. Open app
  2. I see the Splashscreen image
  3. After that, a complete white screen... Without anything.

This is the Xcode log:

2016-06-25 14:32:40.686190 TicketAccess[856:186026] [DYMTLInitPlatform] platform initialization successful
2016-06-25 14:32:40.862195 TicketAccess[856:185913] Apache Cordova native platform version 4.1.1 is starting.
2016-06-25 14:32:40.862821 TicketAccess[856:185913] Multi-tasking -> Device: YES, App: YES
2016-06-25 14:32:40.919203 TicketAccess[856:185913] Using UIWebView
2016-06-25 14:32:40.920666 TicketAccess[856:185913] [CDVTimer][handleopenurl] 0.082970ms
2016-06-25 14:32:40.922235 TicketAccess[856:185913] Unlimited access to network resources
2016-06-25 14:32:40.922329 TicketAccess[856:185913] [CDVTimer][intentandnavigationfilter] 1.596987ms
2016-06-25 14:32:40.922434 TicketAccess[856:185913] [CDVTimer][gesturehandler] 0.072002ms
2016-06-25 14:32:40.939879 TicketAccess[856:185913] [CDVTimer][file] 17.343998ms
2016-06-25 14:32:40.968193 TicketAccess[856:185913] [CDVTimer][splashscreen] 28.226972ms
2016-06-25 14:32:40.978841 TicketAccess[856:185913] [CDVTimer][statusbar] 10.544002ms
2016-06-25 14:32:40.980033 TicketAccess[856:185913] [CDVTimer][keyboard] 1.101017ms
2016-06-25 14:32:40.980101 TicketAccess[856:185913] [CDVTimer][TotalPluginStartup] 59.574008ms
2016-06-25 14:32:40.999160 TicketAccess[856:185996] Metal GPU Frame Capture Enabled
2016-06-25 14:32:40.999690 TicketAccess[856:185996] Metal API Validation Enabled
2016-06-25 14:32:41.328642 TicketAccess[856:185913] Resetting plugins due to page load.
2016-06-25 14:32:41.378880 TicketAccess[856:185913] Finished load of: file:///var/containers/Bundle/Application/013F6E0C-7773-428C-B566-3251FED90334/TicketAccess.app/www/index.html

Which Ionic Version? 1.x or 2.x
1.7.16

ionic info output

Cordova CLI: 6.1.1
Gulp version: CLI version 3.8.11
Gulp local: Local version 3.9.1
Ionic Framework Version: 1.3.1
Ionic CLI Version: 1.7.15
Ionic App Lib Version: 0.7.2
ios-deploy version: 1.8.5
ios-sim version: 3.1.1
OS: Mac OS X El Capitan
Node Version: v6.0.0
Xcode version: Xcode 8.0 Build version 8S128d

ionic plugin list

cordova-plugin-compat 1.0.0 "Compat"
cordova-plugin-console 1.0.3 "Console"
cordova-plugin-device 1.1.2 "Device"
cordova-plugin-dialogs 1.2.1 "Notification"
cordova-plugin-file 4.2.0 "File"
cordova-plugin-media 2.3.0 "Media"
cordova-plugin-nativeaudio 3.0.7 "Cordova Native Audio"
cordova-plugin-splashscreen 3.2.2 "Splashscreen"
cordova-plugin-statusbar 2.1.3 "StatusBar"
cordova-plugin-vibration 2.1.1 "Vibration"
cordova-plugin-whitelist 1.2.2 "Whitelist"
cordova-sqlite-storage 0.8.2 "Cordova sqlite storage plugin (core version)"
ionic-plugin-keyboard 2.2.1 "Keyboard"

This issue is not the same of the https://github.com/driftyco/ionic/issues/6928 issue, because I can't see the topbar and I don't have the errors that shows in that issue.

reply

Most helpful comment

Hi,
I faced the same issues a couple of days ago.
This is maybe because of the "content security policy".

Please add

<meta http-equiv="Content-Security-Policy" content="default-src gap://ready file://* *; script-src 'self' 'unsafe-inline' 'unsafe-eval' *; style-src 'self' 'unsafe-inline' *">

To your index.html and try and rebuild the app.

Hope it helped.

All 14 comments

Hello, thanks for opening an issue with us! Would you mind removing your plugins and testing again? We are very early in our IOS 10 support and plan on improving that support as IOS 10 gets farther along in its development. Also, cordova itself is also early in its ios 10 support, so it is very possible that one of the plugins your using do not work with IOS 10. Thanks for using Ionic!

Hello all! As it seems it has been a while since there was any activity on this issue i will be closing it for now. Feel free to comment if you are still running into this issue. Thanks for using Ionic!

Hi,
I faced the same issues a couple of days ago.
This is maybe because of the "content security policy".

Please add

<meta http-equiv="Content-Security-Policy" content="default-src gap://ready file://* *; script-src 'self' 'unsafe-inline' 'unsafe-eval' *; style-src 'self' 'unsafe-inline' *">

To your index.html and try and rebuild the app.

Hope it helped.

@abhaykumar1415 I had a splashscreen on iOS 10 that the app got stuck on unless the app was put into background and then foreground. Your solution helped with this as well!

Hi, i have a inexplicable problem on ios10 since i install Xcode8.0.
I'm using ionic 2.1.1.
The code is working good with a ionic serve and on android.
In ios, the problem is that the $ionicPlatform.ready event is not fired.
I tried a lot of time to reinstall plugin, to delete platform and rebuild application ... No issue, please help me, maybe 2 weeks that i have this problem.
Thanks by advance
PS : i tried the rootScope.$apply instruction but it didn't work.

IT WORKS NOW...
I only add the
< meta http-equiv="Content-Security-Policy" content="default-src gap://ready file://* *; script-src 'self' 'unsafe-inline' 'unsafe-eval' *; style-src 'self' 'unsafe-inline' *; img-src 'self' data: blob: *; media-src 'self' mediastream: blob:; connect-src * blob:" >

in my index.html, i rebuild the app on ios : ionic build ios

And it hade worked, i m so happy thanks for all

@Thetoy42 @abhaykumar1415 thanks, but this solution only improves my app load time, there are still 1~2 seconds complete white screen on app loads(IOS), how to resolve this issue thoroughly?

I'm also getting the weird whitescreen effect after my splash screen loads. It lasts like 3 seconds or so then it goes to my app

@Thetoy42
<meta http-equiv="Content-Security-Policy" content="default-src gap://ready file://* *; script-src 'self' 'unsafe-inline' 'unsafe-eval' *; style-src 'self' 'unsafe-inline' *; img-src 'self' data: blob: *; media-src 'self' mediastream: blob:; connect-src * blob:" >
I have the white screen again...

Hi, I also have the white screen in my iOS app. Any suggestions?

I don't think ionic will be a good platform for developing hybrid right now, many glitches ..
adopt NativeScript better in all senses..

@mmayorivera I sell plugins for all the popular platforms, Cordova, React Native and NativeScript. NativeScript is the worst. There's only a tiny fraction of the users using Cordova & React Native.
The best alternative to Cordova is React Native. NativeScript is buggy and the docs are horrible.

This issue persists in my project.

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.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

GeorgeAnanthSoosai picture GeorgeAnanthSoosai  路  3Comments

Macstyg picture Macstyg  路  3Comments

alan-agius4 picture alan-agius4  路  3Comments

giammaleoni picture giammaleoni  路  3Comments

manucorporat picture manucorporat  路  3Comments