@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 💙

[dyonng]

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

[tibimunteanu]

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.

[functora]

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.

I have exactly the same issue, but it is reproduced only on weaker android device. On fast phone it runs ok.

[AleksandrMatuka]

@Ionitron
I confirm that this still exists on Android devices after exiting landscape mode. The overlay remains and blocks the app from being used. Tricks like Browser.close won’t help here because it’s already effectively closed.

Steps to reproduce:
1)Set up Capacitor 6 ( any version ) + React on any Android device ( Pixel 8 for example )
2)Open the internal browser using Capacitor.open.
3)Rotate the phone to landscape mode.
4)Press the back button

Please use the three-button navigation mode instead of gesture mode to reproduce this issue, as it allows for pressing the back button

[AntoscencoVladimir]

Same here ...

[mit-solus]

I am facing the same issue. When the browser is closed using the close button on the toolbar, a transparent overlay remains on the screen and it goes away once we press the hardware back button.

@AleksandrMatuka were you able to find any solution for this?