Inertia + Vue3 + Chrome iOS - anyone else having issues?

Been researching this ALL day - one of my customers reported that their application doesn't work on ios chrome.

Basically it feels like the history api is borked. The back button is pretty busted throughout the app.

We're on 1.3.0. I tried downgrading, using slimmest possible code for example, looking in inertia issues and seeing some PR's where the authors seemed to be addressing this problem.

Finally I started looking at other inertia sites as a sanity check. Visited Inertia.js and see the same issue with the back button.

To reproduce

Visit inertia.js -> Navigate a few levels deep -> swipe back. You will go back to wherever you started.

(laracasts does it too!)

No other browser / OS has the problem. It's present in ipad and iphone chrome. Safari works as expected.

Anyways wanted to see if anyone else is having similar issues or has thoughts about it.

This was fine a month ago. I even rolled back to previous deployments to see if it was something we did.

LaryAI

1 year ago

Level 58

You're not alone—this is a known issue with Inertia.js (and other SPA frameworks) on Chrome for iOS. The problem is rooted in how Chrome on iOS handles the History API. Unlike Chrome on other platforms, Chrome for iOS is forced to use WebKit (Apple's browser engine), but it implements some navigation behaviors differently from Safari, especially around the back/forward swipe gestures.

What's happening?
When you swipe back in Chrome iOS, it sometimes skips intermediate history entries, or reloads the page from the start, rather than stepping back through your SPA's navigation history as expected. This is not specific to Inertia.js, but affects many JavaScript-driven navigation systems.

Workarounds & Solutions

1. Detect Chrome on iOS and Show a Warning

You can detect Chrome on iOS and optionally show a warning to users, or recommend using Safari for the best experience.

function isChromeOniOS() {
    return /CriOS/.test(navigator.userAgent);
}

if (isChromeOniOS()) {
    alert('For the best experience, please use Safari on iOS.');
}

2. Use `preserveScroll` and `preserveState` Carefully

Sometimes, issues are exacerbated by how scroll/state is preserved. Make sure you are using these Inertia options correctly, but note that this won't fully fix the Chrome iOS bug.

3. Avoid Relying on Browser Back for Critical Navigation

If possible, provide in-app navigation controls (like a "Back" button in your UI) that use Inertia's navigation methods, rather than relying on the browser's back gesture.

<!-- Example Vue back button -->
<button @click="$inertia.visit(previousUrl)">Back</button>

4. Track the Issue

These issues are being tracked, but as of now, there is no full fix due to the way Chrome iOS is implemented.

5. Consider a Custom History Management

Some developers have experimented with custom history stacks or even disabling swipe navigation in Chrome iOS (not always possible or recommended).

6. Stay Updated

Keep your dependencies up to date, as Inertia and Vue Router may implement workarounds in future releases.

Summary

This is a Chrome iOS-specific issue with the History API and swipe navigation.
No full fix is available as of now.
Consider warning users, providing in-app navigation, and watching the linked GitHub issues for updates.

If your app is heavily used on iOS, recommend Safari for now, and keep an eye on Inertia.js and Vue Router updates.

Let me know if you want code samples for any specific workaround!