Why am I seeing choppy animations (page transitions) in React Router with Ionic 5 on iOS?

Question

I have an Ionic 5 React app that I'm running as a webapp on my server and on iOS.

When I access the webapp via a browser, the page transitions are fine.

But on iOS, they are extremely choppy-- I am seeing half the animation, a blank screen for about half a second, and then the new page loads.

After some time passes, sometimes page transitions become normal; sometimes they don't. This only happens on iOS devices and I haven't been able to identify the cause.

What could be going wrong?

Here's my router:

  const appBasePath = '/webapp/';

  <IonReactRouter>
    <AppUrlListener />
    <IonRouterOutlet>
      <Route exact path={`${appBasePath}index.html`}>
        <Redirect to={appBasePath} />
      </Route>
      <Route exact path={routePageIndex}>
        <PageDisplayIndex />
      </Route>
      <Route exact path={routePagePrivacyPolicy}>
        <PageDisplayPrivacyPolicy />
      </Route>
      <Route exact path={appBasePath}>
        <UserAuthenticationZone setHasLoginToken={setHasLoginToken} />
      </Route>
      <Route>
        <Redirect to={appBasePath} />
      </Route>
    </IonRouterOutlet>
  </IonReactRouter>

score 2 · Accepted Answer · answered May 18 '21 at 12:45

The problem is that when an Ionic React app is loaded, if there is no matching route and you get sent to the "matches any" route component, all the page transitions will be choppy.

On the webapp, the app is getting loaded at index.html, so the router finds a match and the transitions are ok.

But on iOS, the default route is /, which you are not matching in your router. So, if you specify a redirect for /, the page transitions will work smoothly:

  const appBasePath = '/webapp/';

  <IonReactRouter>
    <AppUrlListener />
    <IonRouterOutlet>
      <Route exact path={`${appBasePath}index.html`}>
        <Redirect to={appBasePath} />
      </Route>
      <Route exact path={routePageIndex}>
        <PageDisplayIndex />
      </Route>
      <Route exact path={routePagePrivacyPolicy}>
        <PageDisplayPrivacyPolicy />
      </Route>
      <Route exact path={appBasePath}>
        <UserAuthenticationZone setHasLoginToken={setHasLoginToken} />
      </Route>
      <Route exact path="/">
        <Redirect to={appBasePath} />
      </Route>
      <Route>
        <Redirect to={appBasePath} />
      </Route>
    </IonRouterOutlet>
  </IonReactRouter>

Why am I seeing choppy animations (page transitions) in React Router with Ionic 5 on iOS?

1 Answers1