bug: iOS 17.5, animation flicker

[moerphie]

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

Elements flicker when opening and closing the modal. It only occurs irregularly. In Chroma, Safari and iOS simulator.

https://github.com/ionic-team/ionic-framework/assets/12500071/94031afb-48aa-4aed-abde-7f20ffa413dc

https://github.com/ionic-team/ionic-framework/assets/12500071/bbb57e20-6d29-4190-9d34-c6a30e562514

Expected Behavior

No flicker expected.

Steps to Reproduce

1. Clone this repo: https://github.com/moerphie/ionic-flicker-bug
2. yarn install && yarn run build
3. Launch iOS Simulator and open/dismiss modal

Code Reproduction URL

https://github.com/moerphie/ionic-flicker-bug

Ionic Info

Ionic:

Ionic CLI : 7.2.0 (/usr/local/lib/node_modules/@ionic/cli) Ionic Framework : @ionic/vue 8.2.2

Capacitor:

Capacitor CLI : 6.1.0 @capacitor/android : not installed @capacitor/core : 6.1.0 @capacitor/ios : 6.1.0

Utility:

cordova-res : not installed globally native-run : 2.0.1

System:

NodeJS : v20.15.0 (/usr/local/bin/node) npm : 10.7.0 OS : macOS 14.5

Additional Information

ionic capacitor run ios
❯ iPhone 15 (simulator) (817E61FD-2527-4064-B811-4AEA8A399AC4) 

Follow up of a closed issue from last year #28467

[maximilien0405]

I'm having the exact same issue 😬 Seems like apparently it wasn't fixed in the 17.5 IOS update..

Any news on if someone is working on it ? Also where is the problem coming from ? Ionic or WebKit ?

[moerphie]

I have noticed that when you drag the modal to close it, the background elements don't flicker. Only when you tap on the backdrop.

If that helps: If you are using the ion-action-sheet, this problem does not happen when you tap on the backdrop.

[brodenbrett]

I have the same issue running iOS 17.5 on an iPhone 15 Pro Max emulator in XCode

[gunsha]

having the same issue with react

[maximilien0405]

Hello ! Does anyone have any idea what's the issue here? Would be nice to have at least an answer 😁 It's a pretty bad visual bug that makes any app with modals feel "not native"..

@OS-giulianasilva I see that you have been assigned and then un-assigned from this.. do you or someone on the Ionic team have an idea of the issue ? Thanks !

[joshuah459]

Currently seeing this same behavior. For us it is also fine if the modal is dragged down, but not if the backdrop is tapped.

[JulienLecoq]

@joshuah459 I have the exact same behaviour. Just the backdrop being tapped generates the flickering for us.

[moerphie]

@JulienLecoq @joshuah459 The bug has existed for well over a year and a half. I have no hope that it will be fixed.

[artpol]

I'm experiencing this issue when opening and closing the keyboard and having a modal window open. Serious visual bug. Does anyone else have a solution?

[JulienLecoq]

@moerphie It feels like the team is not actively working on issues lately. It might just be an impression though :/ I hope this can be resolved quickly, I have my app in production and this flickering really annoys me.

[JulienLecoq]

I'm experiencing this issue when opening and closing the keyboard and having a modal window open. Serious visual bug. Does anyone else have a solution?

Unfortunately I don't.

[maximilien0405]

@JulienLecoq Hey yeah it's annoying.. I've been thinking of creating a workaround to this issue. My idea is this : disabling the display of the backdrop using showBackdrop: false and then creating an angular service that detects that a modal is being shown (throughout the whole app) and displaying a custom backdrop.. not sure how to go about it..

(since I have a lot of modals I don't want to call a service each time to display the backdrop but instead make it detect automatically)

[JulienLecoq]

@maximilien0405 Mhh, you would need to create a wrapper around the ModalController and around ion-modal to do that. But that would still not be perfect since the backdrop created by Ionic is "smart". It appears progressively as the modal is being shown and disappears progressively too.

[Martini024]

I've managed to fix this issue using a workaround, though I'm not entirely sure why it works under the hood. Reviewing the source code, I found that when using a sheet modal, initSheetGesture is called, and gestures trigger the moveSheetToBreakpoint animation, which moves smoothly without flickering. In my case, however, changing isOpen in my code was triggering dismiss(), causing flickering.

To avoid this, I bypassed dismiss() by calling setCurrentBreakpoint, which uses moveSheetToBreakpoint behind the scenes, and it resolved the flicker for me.

If anyone else is experiencing the same issue, hopefully this workaround helps without losing the backdrop dismiss animation.

function BottomSheet({ isOpen, style, children, ...rest }: BottomSheetProps) {
  const modalRef = useRef<HTMLIonModalElement>(null);

  useEffect(() => {
    if (!isOpen) {
      modalRef.current?.setCurrentBreakpoint(0);
    }
  }, [isOpen]);

  return (
    <Modal
      ref={modalRef}
      {...rest}
      isOpen={isOpen}
      style={{ ...style, "--height": "auto" }}
      initialBreakpoint={1}
      breakpoints={[0, 1]}
    >
      {children}
    </Modal>
  );
}

[maximilien0405]

@Martini024 This seems like a good workaround ! Thanks for sharing. The issue for me is that i'm using only controller modals...also with Angular not React :/ not sure how to apply your solution..

[Martini024]

@maximilien0405 the official document has provided an example using isOpen to control the modal instead of modalController, and I believe Angular has the equivalent mechanism for listening to isOpen changes, which should do the trick easily (btw, never used Angular)

[thetaPC]

Thank you for submitting the issue! It's unfortunate that iOS 17.5 didn't provide a solution. I was able to reproduce the issue on iOS 17.5 and iOS 18 when tapping on the backdrop. No issues when swiping. We'll look into a solution.

[JulienLecoq]

@thetaPC I see that you have added the package: vue label but the issue is happening also in Angular and React.

[thetaPC]

@JulienLecoq I was not able to reproduce it with Angular and React with iOS 17.5 or 18. If possible, please, provide minimal repros that shows the issues with Angular and React.

[unalkyl]

The problem happens when you manipulate the styles on ion-modal to --height: auto;, I just removed this and the flickering disappeared.