@capacitor/browser: window is not closing properly

[Badisi]

Bug Report

Plugin(s)

@capacitor/browser@5.2.0

Capacitor Version

💊   Capacitor Doctor  💊 

Latest Dependencies:

  @capacitor/cli: 5.7.0
  @capacitor/core: 5.7.0
  @capacitor/android: 5.7.0
  @capacitor/ios: 5.7.0

Installed Dependencies:

  @capacitor/cli: 5.7.0
  @capacitor/core: 5.7.0
  @capacitor/android: 5.7.0
  @capacitor/ios: 5.7.0

Platform(s)

Android

Current Behavior

When opening and closing a browser on Android, the browser sometimes seems to get stuck.
As we can see in the video below, a browser is opened programmatically from the app then closed manually.
The issue is that the closing is failing randomly, leaving the app unresponsive.

We can see the first time the window is closed, that a black bar is sliding from the top of the app to the bottom.
And when the closing is failing (ie. the second time), the top bar suddenly changes to black and stays there.
Like if the window was still there, but transparent, on top of the app view, and thus not allowing to interact with it.
We can also see that once we move the app to the background then foreground, the black top bar disappears and the app is responsive again.

41.mov

Expected Behavior

Browser window should always close without issue.

[Badisi]

I traced down the issue to this reproducible snippet:

await Browser.addListener(
  'browserFinished',
  (): void => void Browser.close())
);
await Browser.open({ url: 'http://capacitorjs.com/' });

The root cause is when you try to close the browser while it is already closed or being closed.

[Ionitron]

This issue needs more information before it can be addressed.
In particular, the reporter needs to provide a minimal sample app that demonstrates the issue.
If no sample app is provided within 15 days, the issue will be closed.

Please see the Contributing Guide for how to create a Sample App.

Thanks!
Ionitron 💙

[Dyon Ng]

I'm running into the same problem where the Browser doesn't fully close and I'm left with the status bar and action bar still on the screen, just like in @Badisi's video. However, I don't have a Browser.close() call in my callback and I'm still running into the same issue:

const handle = await Browser.addListener("browserFinished", async () => {
    this.doSomeCoolStuff();
    await handle.remove();
});
await Browser.open({ url });

My app is running in landscape, and my test device is portrait rotation-locked, so when the Browser opens, it rotates back to portrait. And when I close the Browser, it switches back to landscape and then the bug occurs with the stuck status bar and action bar. HOWEVER, if I disable the device's portrait rotation-lock, the Browser will open in landscape to match the current orientation, and this time, when I close the Browser, everything works perfectly.

Not sure why this happens. And I don't think there's currently a way to set the orientation of the Browser.

Plugin(s)

@capacitor/browser@5.2.0

Capacitor Version

💊   Capacitor Doctor  💊 

Latest Dependencies:

  @capacitor/cli: 5.7.4
  @capacitor/core: 5.7.4
  @capacitor/android: 5.7.4
  @capacitor/ios: 5.7.4

Installed Dependencies:

  @capacitor/cli: 5.7.4
  @capacitor/ios: 5.7.4
  @capacitor/core: 5.7.4
  @capacitor/android: 5.7.4

Platform(s)

Android

My test devices are:
Pixel 2 XL - Android 11
Pixel 7 Pro - Android 14

[Munteanu Tibi]

I am having the same issue where the Browser doesn't close when pressing X, but leaves behind a black header and transparent body. I have to manually tap Back to close it and be able to interact with the app again.

I am not doing any manual closing or anything.
All I'm doing is
Browser.open({ url });

I have the app locked in Landscape mode. I don't know if that is relevant.