[1.x] Fix history navigation issue on Chrome iOS

[pedroborges]

On Chrome iOS, calling this.storeScrollPositions (which uses history.replaceState) right before this.setPage in the router visit method caused timing issues with history.pushState, leading to navigation problems.

Wrapping window.history.pushState with setTimeout inside router.pushState fixes the issue. Using setTimeout defers history.pushState to the next event loop tick, preventing conflicts between history.replaceState and history.pushState. This change doesn’t introduce any side effects since setTimeout with a delay of 0 just delays the execution without altering functionality.

Fixes #1954.

Before

RPReplay_Final1726862048.mp4

After

RPReplay_Final1726864080.mp4

We could enhance this by detecting Chrome on iOS and only applying setTimeout there, but the current fix works universally without issues 🤷‍♂️

[joetannenbaum]

Looks good, thanks!

[AbdullahAgsar]

This solution didn’t work. I cloned it from the master branch and used these changes in my project with npm link. While the issue persists on iOS browsers, I also started experiencing problems on browsers on my macOS device. @pedroborges

[pedroborges]

@AbdullahAgsar Yeah, I noticed last week that this fix caused some side effects on macOS browsers as well. Could you try the fix from #1992? I just tested it again and it resolves the navigation issues for me.

[AbdullahAgsar]

@pedroborges I tried the solution from #1992, but it didn’t work. I continue to experience issues with both forward and backward navigation in macOS browsers. Additionally, the issue in iOS browsers still persists.

[pedroborges]

@AbdullahAgsar Thanks for the feedback. Just to confirm, are you testing this in your project or one of the playgrounds?

Also, would you be able to provide a minimal reproducible repository? I’d love to investigate the issue further.

[AbdullahAgsar]

@pedroborges I tested it in my own project. I will try to create a blank project where the same issue occurs, and once completed, I will share the GitHub link with you.

[pedroborges]

@AbdullahAgsar Thanks, I’d really appreciate your help in reproducing the issue. I just tested #1992 on the Vue and Svelte versions of Ping CRM, and it resolved the navigation issue in those projects as well.

[AbdullahAgsar]

Hello @pedroborges, I’ve been trying to solve the issue I’ve been facing for a long time using your solution. The issue wasn’t only present in iOS Chrome but also in iOS Edge. After making some adjustments along with your solution, I was able to come up with a fix for both browsers.

Initially, in the resolve block, I was using the following code:

const pages = import.meta.glob('./Pages/**/*.vue', { eager: true })
return pages[`./Pages/${name}.vue`]

But I had modified it to:

const pages = import.meta.glob('../../Pages/**/*.vue')
return pages[`../../Pages/${name}.vue`]()

After reverting this code back to its original state, most of the issues were resolved. However, I was still experiencing problems with the back navigation, like adding the same page to the history twice. To resolve these, I removed the Chrome check from the replaceState() function and adjusted it like this:
window.history.replaceState(cloneSerializable(page), '', page.url)

For the Edge browser, I created a variable called isEdgeIOS. With these changes, I was able to fix all the back navigation issues on both browsers.