Deferred item content shows up blank on iOS and Safari in Ionic/Angular

Deferred item content shows up blank on iOS and Safari in Ionic/Angular. The item eventually shows up after you interact with it (click or drag).

There seems to be some kind of mystery issue of items not rendering until the user clicks on it. This is only broken in Safari and iOS devices.

The solution I found was to set my div item class to this:

.myItem{
   -webkit-transform: translate3d(0,0,0);
}

I don’t know yet why this fixes it, but it does for me. I originally found the solution thanks to this github issue:

https://github.com/driftyco/ionic/issues/1110

Ionic Issue With ng-click On iOS Firing Twice

There is an issue with ng-click on iOS firing twice in my app testing. After trying all sorts of event.stopPropagation it still didn’t work correctly. The issue might be related to using angular material library in your project.

I finally solved it by adding this to my app.js file

.config(function( $mdGestureProvider ) {
          $mdGestureProvider.skipClickHijack();
  })

How To Force Ionic/Angular Project To Use Https

This was a thing I had to look up on stack-overflow.

 this.forceSSL = function () {
    if ($location.protocol() !== 'https') {
        $window.location.href = $location.absUrl().replace('http', 'https');
     }
    };

 this.forceSSL();

You can put this function in your service file and then call it every time a page loads.

How To Run Ionic Project On Heroku

You first have to install express server in your ionic project.

npm install express --save

Then create a server.js file:

var express = require('express'),

app = express();
app.use(express.static('www'));
app.set('port', process.env.PORT || 5000);

app.listen(app.get('port'), function () {
    console.log('Express server listening on port ' + app.get('port'));
});

Add an app.json file with some data

{
    "name": "app name",
    "description": "A simple Ionic app for Heroku",
    "logo": "http://pathToYourLogo.png",
    "keywords": ["ionic", "devdactic", "whatever"]
}

Then when you deploy your app to Heroku (preferably with dropbox) it will start as an express server.