Facebook api response unknown on iOS safari

Question

I'm trying to add a pretty basic facebook connection on my web app :

1. Check if user has already facebook-logged into my webapp
2. If yes, continue to the app
3. If not, show the facebook logging page

The problem appears only in iOS safari. Basically, once in a while iOS safari users who already logged into the app arrive with response.status=='unknown' from getLoginStatus() and when they click the fb:login-button, it just opens and close a window and nothing happens. They just cant log in anymore.

I first thought about iOS safari pop-up blocker which happens when you call FB.login() without a click event but it's not what I'm doing (is it ?). Also, turning off pop-up blocker didn't solve the issue.

The problem could be related to cache cause when clearing it allows iOS safari users to log in again. Also the bug doesn't occurs at every connection. But when it does it wont work anymore until logout/clearing cache & cookies.

What I tried :

• Removing cookies when response == 'unknown'. Didn't work.
• Calling FB.logout() when response == 'unknown'. It worked but iOS safari users keeps getting disconnected when it happens.

I (tried to) use the recommended architecture :

My facebook button

<div class="fbConnect">
 <fb:login-button size="large" scope="public_profile,email,user_friends" onlogin="checkLoginState();">
        Connexion via Facebook
 </fb:login-button>
</div>

facebook.js

function checkLoginState() {
    FB.getLoginStatus(function(response) {
        statusChangeCallback(response);
    });
}

function initFacebook() {
    FB.init({
        appId: myAppId,
        status: true,
        xfbml: true,  // parse social plugins on this page
        version: 'v2.8'
    });
    FB.getLoginStatus(function (response) {
        statusChangeCallback(response);
    });
}

function launchFacebook() {
    window.fbAsyncInit = function () {
        initFacebook();
    };
    // Load the SDK asynchronously
    (function(d, s, id) {
        var js, fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) return;
        js = d.createElement(s); js.id = id;
        js.src = "//connect.facebook.net/en_US/sdk.js";
        fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));
}

function statusChangeCallback(response) {
    if (response.status === 'connected') {
      // Check if user gave permissions.
      FB.api('/v2.8/me/permissions', function(response) {
        var declined = [];
        for (i = 0; i < response.data.length; i++) {
          if (response.data[i].status == 'declined') {
            declined.push(response.data[i].permission)
          }
        }

        if (declined.length != 0){
          $('#askAgainPermissions').modal();
          console.log('Login modal shown because facebook needs more permission:')
          return;
        } else {
          // Logged into your app and Facebook.
          someFunction();
        }
      });
    } else if (response.status === 'not_authorized') {
        // The person is logged into Facebook, but not your app.
        console.log('Facebook connection NOT AUTHORIZED')
    } else { //response == unknown : !HERE!
        FB.logout(function(response) {
            location.href = 'https://www.mywebapp.com'
            // user is now logged out
        });

    }
}

launch facebook when document ready

$(document).ready(function() {
    launchFacebook();
});

How I handle cache in app.yaml

- url: /img
  static_dir: img
  secure: always
  expiration: "0d 10m"

- url: /js
  static_dir: js
  secure: always
  expiration: "0d 10m"

- url: /css
  static_dir: css
  secure: always
  expiration: "0d 10m"

- url: /fonts
  static_dir: fonts
  secure: always
  expiration: "0d 60m"

I already did a lot of investigation (e.g. this post) but could not find any solution.