bug: CloseWatcher API Prevents Navigation When No Overlays Are Present in Chromium v126

[a7medm7med]

trafficstars

Prerequisites

• [X] I have read the Contributing Guidelines.
• [X] I agree to follow the Code of Conduct.
• [X] I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

v8.x

Current Behavior

Hello,

I recently noticed that the CloseWatcher API, which had been removed, is now back in Chromium version 126. After testing this feature, I found it to be working very well overall. However, I encountered an issue:

When no overlays are present on the page, I am unable to navigate back to the previous page. This seems to be a bug.

Could you please look into this issue? Thank you for your assistance.

Expected Behavior

The CloseWatcher API should only be active when overlays are present, allowing normal navigation when there are no overlays.

Steps to Reproduce

1- Clone the repository and navigate to the project directory. 2- Enable experimentalCloseWatcher option. 3- Run the command npm run start to start the application. 4- Open a mobile browser and navigate to any page with overlays, such as src/components/modal. 5- Close all overlays. 6- Try to navigate back to the previous page using the back button on your mobile device.

Code Reproduction URL

Ionic Info

v8.2.2

Android Chrome v126

Additional Information

No response

[ionitron-bot[bot]]

Thanks for the issue! This issue has been labeled as needs reproduction. This label is added to issues that need a code reproduction.

Please reproduce this issue in an Ionic starter application and provide a way for us to access it (GitHub repo, StackBlitz, etc). Without a reliable code reproduction, it is unlikely we will be able to resolve the issue, leading to it being closed.

If you have already provided a code snippet and are seeing this message, it is likely that the code snippet was not enough for our team to reproduce the issue.

For a guide on how to create a good reproduction, see our Contributing Guide.

[a7medm7med]

Hi @thetaPC, @brandyscarney 👋

This issue is quite important to us. We've been waiting for proper CloseWatcher support in browsers for a long time.

There's no need for a reproduction URL in this case. You can easily observe the issue by enabling the experimentalCloseWatcher option, then opening a mobile browser (Chrome or Edge) and navigating to any page with overlays. After dismissing all overlays, try using the browser’s back button — you’ll notice that navigation doesn’t occur, even though it should.

I simply modified the default value of experimentalCloseWatcher option to config.get('experimentalCloseWatcher', true).

The good news: CloseWatcher is correctly dismissing overlays, which is great.

The problem: When no overlays are present, it still intercepts the back navigation, preventing the user from returning to the previous page.

Ideally, CloseWatcher should only take control when overlays are active. Once they’re all dismissed, the browser’s default back behavior should be restored.

Tested on: Android Chrome v135

Thanks again for your time and support!

[thetaPC]

A minimal reproduction is important here to ensure we're not making any assumptions about the setup. Since this involves navigation, configuration changes, and overlays, the overall setup might be more complex than it seems. A simple example removes any confusion and lets us see exactly what's going on.

You might be able to use the tabs with a router on the docs site as a start and modify it to display the error.

[a7medm7med]

Hi @thetaPC, thanks for the clarification — that makes sense now, and sorry for the confusion earlier.

Here’s a minimal reproduction:

Edit: https://stackblitz.com/edit/ydawrihu?file=index.html Preview: https://ydawrihu.stackblitz.io/

To reproduce the issue:

1. Open the preview link on a mobile Chrome browser.
2. Try using the browser’s back button — you’ll notice that navigation doesn’t occur, even though it should.