bug: status bar styling not switching on close gesture for card modal

[mortenbo]

Hi! First off, loving Ionic, but I'm stumbling into some weird issues for a barebones React app. For example, the modal stutters as it finishes its animation + the statusbar style is not fluent when using swipe to dismiss. I'm also seeing weirdnesses when swiping back from a page when using a tabbar (sometimes, the offset changes so the page jumps 20px and sometimes the animation to close is very abrupt but I'll make a separate issue on that.).

I'm creating this issue/question before proceeding with building an Ionic app/prototype because if this behavior is expected then I think it may not be fluent enough for my needs. This is not a critique by any means.

Ionic version:
7.3.2

Dependencies:

  "dependencies": {
    "@capacitor/android": "5.3.0",
    "@capacitor/app": "5.0.6",
    "@capacitor/browser": "^5.0.6",
    "@capacitor/core": "5.3.0",
    "@capacitor/geolocation": "^5.0.6",
    "@capacitor/haptics": "^5.0.6",
    "@capacitor/ios": "5.3.0",
    "@capacitor/keyboard": "5.0.6",
    "@capacitor/status-bar": "5.0.6",
    "@ionic/core": "^7.3.2",
    "@ionic/react": "^7.3.2",
    "@ionic/react-router": "^7.3.2",
    "@types/react-router": "^5.1.20",
    "@types/react-router-dom": "^5.3.3",
    "ionicons": "^7.0.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-localization": "^1.0.19",
    "react-query": "^3.39.3",
    "react-router": "^5.3.4",
    "react-router-dom": "^5.3.4"
  },

I'm submitting a ...
[x] bug report (maybe)
[ ] feature request

Current behavior:
Modal animation stutters near the end + statusbar style doesn't change properly when swiping to close a modal.

It happens both in the simulator and on device. Here's a video of the simulator:

modal.mov

Expected behavior:
Based on what I've read about Ionic, animations should be super smooth + statusbar style should animate as well.

Steps to reproduce:
pages/Favorites.tsx:

import React, { useState, useRef, useEffect } from "react";
import {
  IonContent,
  IonHeader,
  IonPage,
  IonTitle,
  IonButton,
  IonButtons,
  IonToolbar,
  IonModal,
} from "@ionic/react";

const Favorites: React.FC = () => {
  const modal = useRef<HTMLIonModalElement>(null);
  const page = useRef(undefined);
  const [presentingElement, setPresentingElement] = useState<
    HTMLElement | undefined
  >(undefined);

  useEffect(() => {
    setPresentingElement(page.current);
  }, []);

  function dismiss() {
    modal.current?.dismiss();
  }

  return (
    <IonPage ref={page}>
      <IonHeader>
        <IonToolbar>
          <IonTitle>App</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent className="ion-padding">
        <IonButton id="open-modal" expand="block">
          Open
        </IonButton>
        <IonModal
          ref={modal}
          trigger="open-modal"
          presentingElement={presentingElement}
        >
          <IonHeader>
            <IonToolbar>
              <IonTitle>Modal</IonTitle>
              <IonButtons slot="end">
                <IonButton onClick={() => dismiss()}>Close</IonButton>
              </IonButtons>
            </IonToolbar>
          </IonHeader>
          <IonContent className="ion-padding"></IonContent>
        </IonModal>
      </IonContent>
    </IonPage>
  );
};

export default Favorites;

App.tsx:

import { IonApp, setupIonicReact } from "@ionic/react";
import Favorites from "./pages/Favorites";

/* Core CSS required for Ionic components to work properly */
import "@ionic/react/css/core.css";

/* Basic CSS for apps built with Ionic */
import "@ionic/react/css/normalize.css";
import "@ionic/react/css/structure.css";
import "@ionic/react/css/typography.css";

/* Optional CSS utils that can be commented out */
import "@ionic/react/css/padding.css";
import "@ionic/react/css/float-elements.css";
import "@ionic/react/css/text-alignment.css";
import "@ionic/react/css/text-transformation.css";
import "@ionic/react/css/flex-utils.css";
import "@ionic/react/css/display.css";

/* Theme variables */
import "./theme/variables.css";

setupIonicReact();

const App: React.FC = () => {
  return (
    <IonApp>
      <Favorites />
    </IonApp>
  );
};

export default App;

[liamdebeasi]

Thanks for the report. Can you provide a GitHub repo I can use to verify this behavior? Also, can you tell me the iOS version and physical device you tested this on? Simulators usually are not a great indicator of real world performance, so it's best to test this on a physical device.

I tested this on my end, and I don't see any animation stuttering. However, I can reproduce the status bar bug. Here's a dev build if you want to give the status bar fix a try:

npm install @ionic/react@7.3.3-dev.11693592322.138d91e6

[mortenbo]

@liamdebeasi Thanks for the answer!

The statusbar issue is fixed but I think a regression got introduced. Now, the issue is reversed, meaning when I open the modal it has the issue:

bug.mov

---

When it comes to the stuttering, you can also see it in your videos on #28110. As the modal is nearing the top, it's skipping pixels. Compared to native, where it isn't. And I'm just wondering if that's the premise with webviews. If so, that's totally cool. I just needed to know.

I know we're in the detail/nitpicking arena with the animations but they just don't feel native, even compared to React Native.

I could read online JustWatch is based on Ionic. There, animations are super smooth without any lag. I was thinking, if they are using Ionic (are they still?), then I must be missing some tricks to get that performance.

Local	JustWatch

Note: I think videos on GitHub might misrepresent how it looks on device so I would encourage you to download JustWatch and try it there.

PS: I also tried to disable 120 Hz on my phone and go to 60 Hz without any luck.

[kim-hanho]

It seems to be the same problem as this ionic forum post (https://forum.ionicframework.com/t/ionic-v7-ios-120hz-smooth-transitions-when/232473/18). iOS webview seems to ignore 120hz animation.

[mortenbo]

@kim-hanho I've tried to disable 120 Hz on my phone in settings but it doesn't change anything.

[liamdebeasi]

@liamdebeasi Thanks for the answer!

The statusbar issue is fixed but I think a regression got introduced. Now, the issue is reversed, meaning when I open the modal it has the issue:

Whoops, I fixed that last week but forgot to send over the new dev build. Here it is: 7.3.3-dev.11693593044.15886e1c

When it comes to the stuttering, you can also see it in your videos on #28110. As the modal is nearing the top, it's skipping pixels. Compared to native, where it isn't. And I'm just wondering if that's the premise with webviews. If so, that's totally cool. I just needed to know.

Thanks! This is a bug in WebKit with easing curves. We are tracking that in #25369.

---

I'll close this out once #28110 merged, but you can follow #25369 for updates on the animation glitch.