Ionic-framework: White screen on iOS 10

[arcreative]

Short description of the problem:

My app that's been working perfectly is broken after update to iOS 10 beta 1. Title bar shows, but nothing else does:

What behavior are you expecting?

App works :-)

Steps to reproduce:

1. Open app, watch Splash Screen fade to failure

XCode log is as follows--the 'chmodding parent' and 'nw_connection_write_close' are new since this problem started occurring

2016-06-15 10:43:47.175994 Compass[1368:544061] Apache Cordova native platform version 4.1.1 is starting.
2016-06-15 10:43:47.177078 Compass[1368:544061] Multi-tasking -> Device: YES, App: YES
2016-06-15 10:43:47.356123 Compass[1368:544061] Using UIWebView
2016-06-15 10:43:47.359358 Compass[1368:544061] [CDVTimer][handleopenurl] 0.160038ms
2016-06-15 10:43:47.366226 Compass[1368:544061] [CDVTimer][intentandnavigationfilter] 6.722987ms
2016-06-15 10:43:47.366484 Compass[1368:544061] [CDVTimer][gesturehandler] 0.144958ms
2016-06-15 10:43:47.368666 Compass[1368:544061] [CDVTimer][keyboard] 2.053976ms
2016-06-15 10:43:47.592948 Compass[1368:544061] [CDVTimer][statusbar] 224.096954ms
2016-06-15 10:43:47.643507 Compass[1368:544061] [CDVTimer][splashscreen] 50.348997ms
2016-06-15 10:43:47.643608 Compass[1368:544061] [CDVTimer][TotalPluginStartup] 284.527004ms
2016-06-15 10:43:47.660604 Compass[1368:544061] createNotificationChecker
2016-06-15 10:43:47.660670 Compass[1368:544061] not coldstart
2016-06-15 10:43:48.470369 Compass[1368:544061] active
2016-06-15 10:43:48.472392 Compass[1368:544061] PushPlugin skip clear badge
2016-06-15 10:43:48.657253 Compass[1368:544061] Resetting plugins due to page load.
2016-06-15 10:43:49.467407 Compass[1368:544061] Finished load of: file:///var/containers/Bundle/Application/.../Compass.app/www/index.html#/
2016-06-15 10:43:59.410224 Compass[1368:544130] chmodding parent /private/var/mobile/Containers/Data/Application/.../Library/Cookies with perm 700
2016-06-15 10:44:01.585162 Compass[1368:544132] [] nw_connection_write_close 4 Connection is not ready, sending error callback
2016-06-15 10:44:01.585929 Compass[1368:544132] [] __tcp_connection_write_eof_block_invoke Write close callback received error: [57] Socket is not connected
2016-06-15 10:44:01.651129 Compass[1368:544130] [] nw_connection_write_close 1 Connection is not ready, sending error callback
2016-06-15 10:44:01.651646 Compass[1368:544130] [] __tcp_connection_write_eof_block_invoke Write close callback received error: [57] Socket is not connected
2016-06-15 10:44:01.788771 Compass[1368:544130] [] nw_connection_write_close 6 Connection is not ready, sending error callback
2016-06-15 10:44:01.789196 Compass[1368:544130] [] __tcp_connection_write_eof_block_invoke Write close callback received error: [57] Socket is not connected
2016-06-15 10:44:02.774359 Compass[1368:544130] [] nw_connection_write_close 3 Connection is not ready, sending error callback
2016-06-15 10:44:02.774568 Compass[1368:544130] [] __tcp_connection_write_eof_block_invoke Write close callback received error: [57] Socket is not connected

Which Ionic Version? 1.7.15

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

Also fails with Xcode version: Xcode 7.3.1 Build version 7D1014

Not sure what to do with this, going to start by removing all the plugins/regenerating the project... but I'm a little afraid about users updating to iOS 10 and getting a white screen...

[mhartington]

@arcreative I've been looking into iOS10 and testing things out and this hasn't happened in my tests yet. With the app on the device, can you attach the safari dev tools to remote inspect. If there are any JS or loading errors, they would be visible there.

Also worth noting iOS10 is still super early beta 😁

[arcreative]

@mhartington Thanks for the quick response. I'll try that, but to the best of my knowledge, Safari inspector closes every time, meaning the JS startup errors don't get logged because I can't get it to pop up prior to the app loading. Do you know of a way around that? Also, I don't see any JS errors in the Xcode console, they should show there, right?

[mhartington]

Hmm, they should, show up in xcode, but it was just a thought.

The readout in the xcode doesn't look to promising.
It could be related to a native issue with a plugin, I did see a lot of warnings in my tests.

What plugins are you using? (ionic plugin ls)

[arcreative]

Looks like they messed with CSP again... the following were repeatedly showing in the JS console:

[Error] Refused to load gap://ready because it appears in neither the child-src directive nor the default-src directive of the Content Security Policy.
[Error] Refused to connect to file:///var/containers/Bundle/Application/<...>/Compass.app/www/templates/login.html because it appears in neither the connect-src directive nor the default-src directive of the Content Security Policy. (x6)

[mhartington]

Ahh alright, that looks to be the case then.

[arcreative]

Disabling CSP fixes it for now, will figure out the correct directives. Thanks again!

[yihyang]

Facing the same issue here, my app became white screen after the splashscreen has been loaded. Hopefully Apple will fix the issues. 😢

[ohh2ahh]

I had the exact same issue with CSP. Adding default-src 'self' gap://ready; in the CSP meta tag located in index.html fixed it.

[arcreative]

@ohh2ahh Yep, in my case I had to add file://* as well.

[pliablepixels]

Hey folks, I'm having the same problem with the latest IOS 10 beta (simulator)
This is my CSP

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

What exactly needs to change?

I don't see any CSP Related errors in console - all I see

2016-06-23 14:29:58.336940 zmNinja[34401:3690385] bundleid: com.pliablepixels.zmninja-pro, enable_level: 0, persist_level: 0, propagate_with_activity: 0
2016-06-23 14:29:58.340318 zmNinja[34401:3690385] subsystem: com.apple.UIKit, category: HIDEvents, enable_level: 0, persist_level: 0, default_ttl: 0, info_ttl: 0, debug_ttl: 0, generate_symptoms: 0, enable_oversize: 0, privacy_setting: 0
2016-06-23 14:29:58.352215 zmNinja[34401:3690381] Created DB, header sequence number = 256
2016-06-23 14:29:58.365894 zmNinja[34401:3690381] Created DB, header sequence number = 256
2016-06-23 14:29:58.393386 zmNinja[34401:3690381] subsystem: com.apple.BaseBoard, category: MachPort, enable_level: 0, persist_level: 0, default_ttl: 0, info_ttl: 0, debug_ttl: 0, generate_symptoms: 0, enable_oversize: 0, privacy_setting: 0
2016-06-23 14:29:58.443433 zmNinja[34401:3690388] subsystem: com.apple.FrontBoard, category: Common, enable_level: 0, persist_level: 0, default_ttl: 0, info_ttl: 0, debug_ttl: 0, generate_symptoms: 0, enable_oversize: 0, privacy_setting: 0
2016-06-23 14:29:58.565321 zmNinja[34401:3690129] subsystem: com.apple.UIKit, category: GestureEnvironment, enable_level: 0, persist_level: 0, default_ttl: 0, info_ttl: 0, debug_ttl: 0, generate_symptoms: 0, enable_oversize: 0, privacy_setting: 0
2016-06-23 14:29:59.029000 zmNinja[34401:3690129] #WK: Starting frame load, frame = 0x1233bc000, main = 1
2016-06-23 14:29:59.051941 zmNinja[34401:3690129] subsystem: com.apple.coremedia, category: , enable_level: 0, persist_level: 0, default_ttl: 0, info_ttl: 0, debug_ttl: 0, generate_symptoms: 0, enable_oversize: 0, privacy_setting: 0
2016-06-23 14:29:59.343928 zmNinja[34401:3690415] #WK: Finished frame load without error, frame = 0x1233bc000, main = 1

[pliablepixels]

fixed - in my case, I had to add gap:

[renanss]

how should I add this gap? I've tried all combinations. Can you please show ur CSP

[pliablepixels]

@renanss https://github.com/pliablepixels/zmNinja/blob/master/www/index.html#L10

[renanss]

Thank you! Live saver!

[jacquesdev]

@pliablepixels - do you know what the difference is between what you used and what was suggested at first?

default-src 'self' gap://ready ;

vs

default-src * 'self' gap: ;

[jacquesdev]

Hi @arcreative, I am seeing issues with file as well, but not sure where to add file://*. Can you please show me the code snippet, specifically how it should look with gap://ready

I current have default-src * 'self' gap://ready file:// ; but it doesn't seem to be working?

[arcreative]

@jacquesdev I don't think you should be using file://, if I remember correctly. Try using relative links to your files with ./filename or ./dir/filename since file:// is bound to be unreliable--I'll try to post what's been working for me later.

[jacquesdev]

@arcreative - of thanks for getting back to me, the reason I thought it is required is because I am getting this error when running my app:

Refused to connect to blob:file:///e0967858-e565-43fa-84a9-c6ecc48de1d9 because it appears in neither the connect-src directive nor the default-src directive of the Content Security Policy.

I assumed this is why you mentioned you have to add it?

[arcreative]

@jacquesdev not sure what you're trying to do, but looks like something is going wrong there. I don't feel like blob:file: is either a valid protocol or going to yield anything working. Are you using relative links for your sources, e.g. ./whatever.jpg?

[arcreative]

@jacquesdev Sorry, misspoke. I'm using the following CSP tag:

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

[jacquesdev]

Thanks @arcreative!

[nickimola]

Hi Guys, I am facing a similar issue. I was getting the same gap://ready error, and I fixed it.
The problem I've got now is that a single click (tap) doesn't work. I need to quickly tap several times to trigger an action (menu to appear, go to link..) but a single tap is enough on toggles, foe example.

Any idea?

[arcreative]

@nickimola not unless you're using something in a non-standard way, I haven't experienced anything like that (except maybe with SVGs/d3). Would check if you're using a 3rd party lib, have some non-clickable element, or strange CSS, maybe just remove everything and add stuff but by bit until it breaks. Also make sure you have the latest ionic JS/CSS as a first priority.

[nickimola]

I am using:

ionic 2.0.0
cordova 6.3.1

It works properly on everything except for ios 10.
Do you know if some major changes was made (in ios) that could affect tap events?

[willionaire7]

it seems that the fix from @arcreative doesnt work with the latest cordova ios 4.2.1, but it works if you build it with an earlier version

[abhaykumar1415]

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.

[rafaelcremer]

I have the same issue, some things like $state.go() are not working, I didn't have much time to debug yet, but my app doesn't work at all now.

[arcreative]

@rafaelcremer you're going to have to look at the console before notifying everyone here that you haven't yet :-)

[sotisoti]

@nickimola, i am using ionic2 too, still no luck with the additional meta tag added. Are you able to solve your problem?

[nickimola]

@sotisoti i'm using ionic1 with angular1, and no, still having the same issue (which is no clicks are fired on iOS 10)

@arcreative do you mind explain this a bit better? what you mean with non-standard way? I'm still having this issue and i have really no idea why and what's going on

[mhartington]

So some common things to look for.

• CSP meta tags. Remove them if they're causing issues
• Errors in your code. Open the safari dev tools and inspect the device. Make sure to hit cmd-r to reload the app. Safari seems to miss any errors/console logs that happened before the dev tools are open.
• Ionic 2 projects. Check you build out put for Typescript errors. You might be missing types for third-party modules.
• Lint your code. Run your code through a linter. There could be errors that you are just not seeing. A linter will be able to catch these for you. V2 projects shoul use ionic's tslint rules, and V1 projects can use eslint.

Please make sure you all look at these options. While frustrating, this kind of error is often the cause of one small error in your code. You need to debug and provide the correct information. Thanks.

[nickimola]

@mhartington Hi, and thanks for your reply.
So, I said I was using ionic 2.0.0, but that was actually the CLI version.
I was using ionic 1.2.4 and I updated this morning to 1.3.1 using the following dependency:

"dependencies": {
"angular": "1.5.3",
"angular-animate": "1.5.3",
"angular-sanitize": "1.5.3",
"angular-ui-router": "0.2.13"
}

Safari has no error at all (yes, tried to reload the app several times as well but I only get a CSS warning (from ionic css).

The code is also linted and validated, as I develop the app using coffeescript and lesscss, and they are both checked and, if no errors, compiled to js and css.

The app loads and works and everything is displayed properly, but I've noticed that I have to doubleclick to trigger any type of events and I really have no idea even how to debug this issue..

[mhartington]

@nickimola so how could I go about recreating this. Can you share some problematic code? Help me help you 😁

[nickimola]

@mhartington What's the best way to share the code with you? I don't really wanna post tons of code in here

[mhartington]

if you could test a small starter demo, that would help

ionic start testApp blank 

Then post that to github. It does not have to be a 1:1 recreation of your app. But if there's a particular part that is causing errors, please try to recreate that.

[nickimola]

@mhartington ok, i'll try to do it now

[nickimola]

@mhartington I try it starting with the blank project like you suggested, and it works. I assume it's something else..
and as I was expecting, it's going to be one of those hard error to track down and solve..

[sotisoti]

Problem fixed. So I had line var data = JSON.stringify() which was treated as error in IOS10.

[mhartington]

Not sure why there's down votes....

But thats great to heard you've isolated the issue @sotisoti !
@nickimola this is also good, at least its been isolated to something in your app and not the framework.

[ghenry22]

updating CSP to have the gap://ready included resolved this for me, my ionic2 app is back to playing nice with xcode 8 and the new ios 10 device emulators

Was a bit freaked out there for a minute when everything was broken.

[kiwox]

CSP has solved the issue for me.
With Content Security Policy included at index.html I was getting the Out of Memory crash and application was not responding. Also the Safari Web Inspector didn't work.

Now I have my app running again. Thank you!

[nickimola]

@mhartington I have some updates on the issue I'm facing.

After a lot of testing, I noticed that in my case I have to change each ng-click to on-tap in order for the event to be fired.

For what I understood, ionic should handle the conversion between ng-click and tap events (to be usable on a mobile device) but it seems like it's not doing this.

Apparently, I am not the only one facing this issue anymore (my question on stackOverflow)

http://stackoverflow.com/questions/39406805/tap-issue-with-ionic-and-cordova-on-ios-10/40013116?noredirect=1#comment67304648_40013116

and some people noticed that using data-tap-disabled="true" fixed this issue.

Now, adding that will break the scrolling, so that's not really an option.

I've noticed that changing ng-click with on-tap fired the event, but I don't wanna do and replace all the ng-click in my app, and still, even if I do change all of them, I'll still have issues with ui-sref (it won't work) as well as button element to open the side menus.

Any idea?

[nickimola]

FIXED!

I fixed this. I don't know if this will be useful for you tho. The issue was one plugin I bought from ionic market, and to be precise it was this one:

https://market.ionic.io/plugins/ion-time-picker

I already sent an email to the developer

[souly1]

Hi @nickimola , thanks for bringing the issue to my attention, it has been fixed and new version released, make sure to download it.

Thanks

[fquirogam]

Hi everyone, I having the CSP problem and I added the <meta http-equiv="Content-Security-Policy" content="default-src 'self' gap://ready file://* *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'"> meta but is still not working. I don't know what else to do. I've looking for a solution for days and nothing I'm getting always Error] Refused to load gap://ready because it appears in neither the child-src directive nor the default-src directive of the Content Security Policy. in an infinte loop

[JEvangeline]

Hi everyone ,
I am having an issue with NSURLSessionDataTask , while trying to upload I am getting the following message in console .

 [] __tcp_connection_write_eof_block_invoke Write close callback received 

 [error: [89] Operation canceled]

Has anyone faced this ?

[kby799]

What I did in my code is put file://* * under data: and leave gap://ready in the default-src, this way it solved the error I have.

So this is what it may look like

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

[mmazloum]

Hi all,

I had the same issue but anytime I try to run ionic build ios, or ionic emulate ios, from the console, my Index.html changes automatically the CSP I'm trying to change and removes gap://ready from my CSP tags.

Does anyone knows where that could come from ? @mhartington ?

thanks

[ghenry22]

make sure that you're editing the index.html under the /src folder. delete the .tmp and www folders and then run build again. when you build or emulate it will copy the files from src to the other locations. maybe you have a permissions issue and it's not copying the updated file from /src or maybe you're editing the file under /www or something by accident (I've done that with too many files open at once before).

[mmazloum]

In deed, I was playing with the index.html in www... thanks ;-)

[finalxcode]

Thanks @ghenry22

[finalxcode]

hi All, when i use this advise:
<meta http-equiv="Content-Security-Policy" content="default-src gap://ready file://* *; script-src 'self' 'unsafe-inline' 'unsafe-eval' *; style-src 'self' 'unsafe-inline' *">
or
<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 still get 1~2s blank screen, any soluation will be appreciated!

my config.xml

<?xml version="1.0" encoding="UTF-8" standalone="yes"?> <widget id="com.ionicframework.testinputapp413981" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0"> <name>testInputApp</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-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:*"/> </platform> <platform name="ios"> <allow-intent href="itms:*"/> <allow-intent href="itms-apps:*"/> <icon src="resources/ios/icon/[email protected]" width="20" height="20"/> <icon src="resources/ios/icon/[email protected]" width="40" height="40"/> <icon src="resources/ios/icon/[email protected]" width="60" height="60"/> <icon src="resources/ios/icon/[email protected]" width="29" height="29"/> <icon src="resources/ios/icon/[email protected]" width="58" height="58"/> <icon src="resources/ios/icon/[email protected]" width="87" height="87"/> <icon src="resources/ios/icon/[email protected]" width="40" height="40"/> <icon src="resources/ios/icon/[email protected]" width="80" height="80"/> <icon src="resources/ios/icon/[email protected]" width="120" height="120"/> <icon src="resources/ios/icon/[email protected]" width="57" height="57"/> <icon src="resources/ios/icon/[email protected]" width="114" height="114"/> <icon src="resources/ios/icon/[email protected]" width="60" height="60"/> <icon src="resources/ios/icon/[email protected]" width="120" height="120"/> <icon src="resources/ios/icon/[email protected]" width="180" height="180"/> <icon src="resources/ios/icon/[email protected]" width="72" height="72"/> <icon src="resources/ios/icon/[email protected]" width="144" height="144"/> <icon src="resources/ios/icon/[email protected]" width="76" height="76"/> <icon src="resources/ios/icon/[email protected]" width="152" height="152"/> <icon src="resources/ios/icon/[email protected]" width="228" height="228"/> <icon src="resources/ios/icon/[email protected]" width="167" height="167"/> <icon src="resources/ios/icon/[email protected]" width="76" height="76"/> <icon src="resources/ios/icon/[email protected]" width="50" height="50"/> <icon src="resources/ios/icon/[email protected]" width="100" height="100"/> <splash src="resources/ios/splash/[email protected]" width="640" height="960"/> <splash src="resources/ios/splash/[email protected]" width="640" height="1136"/> <splash src="resources/ios/splash/[email protected]" width="750" height="1334"/> <splash src="resources/ios/splash/Default-Landscape.png" width="1024" height="768"/> <splash src="resources/ios/splash/[email protected]" width="2048" height="1536"/> <splash src="resources/ios/splash/[email protected]" width="2208" height="1242"/> <splash src="resources/ios/splash/Default-Portrait.png" width="768" height="1024"/> <splash src="resources/ios/splash/[email protected]" width="1536" height="2028"/> <splash src="resources/ios/splash/[email protected]" width="1242" height="2208"/> </platform> <preference name="webviewbounce" value="false"/> <preference name="UIWebViewBounce" value="false"/> <preference name="DisallowOverscroll" value="true"/> <preference name="android-minSdkVersion" value="16"/> <preference name="BackupWebStorage" value="none"/> <preference name="ShowSplashScreenSpinner" value="false"/> <preference name="SplashMaintainAspectRatio" value="true"/> <preference name="SplashShowOnlyFirstTime" value="false"/> <preference name="SplashScreenDelay" value="1000"/> <preference name="FadeSplashScreen" value="false"/> <preference name="SplashScreen" value="screen"/> <preference name="Fullscreen" value="true" /> <feature name="StatusBar"> <param name="ios-package" onload="true" value="CDVStatusBar"/> </feature> </widget>

[DaveData]

For me the solution was to add frame-src * gap://ready to the CSP. Already had gap://ready in the default-src but that was not enough:

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

[mhartington]

Locking this issue for now.
Most solutions have already been posted and if anything else were to show up, please file a new issue.