InAppBrowser close() freeze UI

My application is using Ionic 2. When a user launches, they are met by the splashscreen. After a few seconds an instance of InAppBrowser launches for them to login to a company portal. Once the browser is redirected, the browsers listens for the ‘loaderror’. At which point the browser closes, and Splashscreen.hide() is used. 9 times out of 10, the UI is frozen and the user tap or touch anything on the screen. If I put a done button to close the browser manually, 5 times out of 10 the UI freezes. My code is below:

public freshPOST() {

    //declare ESO login page as well as open Inappbrowser
    var url_code: any;
    let browser = new InAppBrowser(url, '_blank', 'location=no,zoom=yes,enableViewportScale=yes,toolbar=no');

    //on redirect browser shows load error, and not url
    browser.on("loaderror").subscribe((event: InAppBrowserEvent) => {

      //pull code from url and store in variable
      let token = event.url.split('=')[1].split('&')[0];
      url_code = token;
      localStorage.setItem('url_code', url_code);

      //headers to be sent
      var headers = new Headers();
      headers.append('Content-Type', 'application/x-www-form-urlencoded');
      let options = new RequestOptions({ headers: headers });

      //parameters for POST request
      let details = "code=" + url_code + "&client_id=CLIENT_ID&client_secret=CLIENT_SECRET&redirect_uri=REDIRECT_URI&grant_type=authorization_code";

      //POST request with parameters injected'CLIENT_TOKEN_ENDPOINT', details, options)
        .map(res => res.json())
        data => {
          //convert response to string, pull access token, and store in variable
 = JSON.stringify(data)
          var access_token = data.access_token;
          var expires_in = data.expires_in;
          var refresh_token = data.refresh_token;

          //store all responses to local storage for retrieval
          localStorage.setItem('access_token', access_token);
          localStorage.setItem('expires_in', expires_in);
          localStorage.setItem('refresh_token', refresh_token);

          //launch app
          //write to console success
          //close browser
          console.log("Successful POST and Authentication");
        (err) => {

          //POST Failure
          //close browser
          console.log("post didnt work");

I am launching this from App.Component, and only if platform is ready. The first page is an intro page that you skip to get to the tabbed view. Thank you for any help you can provide.

Did you remote debug the problem on the device already?
Follow these instructions here to debug the problem in Safari dev tools:
Follow these instructions here to debug the problem in Chrome dev tools:
Look at the console and network tabs for errors.

Where exactly is it stopping in the code you posted above?

The splashscreen does hide, and then the Intro page is loaded after fade. Once loaded, I cannot tap anything. I am successfully storing from the POST request, and successfully closing the browser, and successfully hiding the splashscreen. After all of that, I cannot tap anything. The function itself is successfully firing, it is the app itself is frozen. I put a GIF on the intro page to see if it freezes, but it plays, so something I suspect, isnt closing or hiding, and staying in front of the Intro page itself.

Ok, this sounds not like “freeze” but something is still on top of the actual page, as you say.

Look at my first reply again and check using your browser’s dev tools if there is a div on top or anything.

If not, it might be something from the native part. Then I suggest you remove the splash screen earlier (before you open the InAppBrowser) and see if this fixes the problem. Maybe even try to leave the InAppBrowser stuff out and show the Intro page directly, just find out to which part of the code this is related to.

Thank you. I am not able to identify a div that is in front of everything. Using the dev tools, it did throw a warning “Native: device ready did not fire within 5000ms. This can happen when plugins are in an inconsitent state.”

Yep, then I would look into the Splashscreen and InAppBrowser thing.

Thank you. I have tried so many combinations, but it seems to always hang up on the close function for Inappbrowser. That is the constant in all of this. Even with the splashscreen removed and auto close on the browser, it seems to focus on the browser, and not let me tap anything else. Has anyone encountered this?

Random thought: Is it connected to the loaderror event or does it also happen if there is no such event in the browser?

I have tried it both ways. Both when platform is ready in App.Component, and in the success or error in the POST request. Each combination stems from the Inappbrowser close(). In the best situation, I would keep the splashscreen up until the user is authenticated, keeping them from using the app. The problem is not the splashscreen, because the only constant is the browser.

So I have narrowed this down a little. The only time to replicate the bug 100% is to tap on the input box in the website. If I run through the entire process, without every clicking inside the inappbrower input box, the app never freezes. Could this be a focus thing? The user is required to sign in through the web, to access the application, so I am guessing that the input box is still what the app is focusing on, even when the browser closes.

1 Like

Hi, I have the same issue (only with iOS). Did you solved ?

This ended up being a bug with the site itself. The keyboard would show, and the focus would be on an input box, but it would never refocus. This caused the tap to be focused on the keyboard, which had already closed by then.

Hello! I’m experiencing the same issue. After my inappbrowser has been closed, I noticed that some buttons on the app suddenly won’t work? Is this issue already been resolved?

I have the same issue, how you solved it?

Same issues with InAppBrowser, sometimes back button on both devices (IOS / Android) stop working.

Seen building in production mode fix the issue.

$ ionic cordova build ios --prod

$ ionic cordova build android --prod

No solution or workaround?

I have also been facing this issue. After I close() the inappbrowser, it seems the buttons etc. on my screens are not responding.

Is there a solution for this by any chance?

Hi Vahidv,
Even i am facing the same issue(using v1.7.2 of inapp plugin) and have got struck in this. If u got any solution or workaround,please let me know.Thanks!

Hi, I know this thread is quite old but I just stumbled upon this. I am facing the same issue, and in my case the steps to reproduce it are as follows

  1. Launch inappbrowser on
  2. Tap on the search-bar on the page
  3. Blur the search-bar
  4. Close the browser.

At this point the UI will be all blocked. I am using version 3.0.0 of the plugin.