bug: webkit iOS 17, animation flicker

[moerphie]

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

v7.x

Current Behavior

Dismissing the modal triggers a flicker, perhaps the backdrop? It only occurs irregularly. Never in Chrome, Safari rarely, iOS Simulator more often.

https://github.com/ionic-team/ionic-framework/assets/12500071/9ba93b9f-0598-4b3b-b465-ff894ecd98e5

Expected Behavior

No flicker expected

Steps to Reproduce

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

Code Reproduction URL

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

Ionic Info

Ionic:

Ionic CLI : 7.1.1 (/usr/local/lib/node_modules/@ionic/cli) Ionic Framework : @ionic/vue 7.5.3

Capacitor:

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

Utility:

cordova-res : not installed globally native-run (update available: 2.0.0) : 1.7.4

System:

NodeJS : v16.17.0 (/usr/local/bin/node) npm : 9.6.7 OS : macOS Unknown

Additional Information

No response

[liamdebeasi]

Thanks for the report. This is happening due to an iOS 17 regression with accelerated animations. We reported this to Apple last week: https://bugs.webkit.org/show_bug.cgi?id=263996

[kim-hanho]

For someone looking for workaround: Hide backdrop element for a very short time between (willDismiss) and (didDismiss) events.

<ion-modal
    #myModal
    (willDismiss)="myModal.showBackdrop = false"
    (didDismiss)="myModal.showBackdrop = true"
></ion-modal>

or

<ion-modal
    [ngClass]={'hide-backdrop' : isHideBackdrop}
    (willDismiss)="isHideBackdrop = true"
    (didDismiss)="isHideBackdrop = false"
></ion-modal>

ion-modal.hide-backdrop{
    &::part(backdrop){
        display:none
    }
}

I hope webkit will resolve the issue soon.

[liamdebeasi]

Hi everyone,

This has been resolved in iOS 17.5. This version is still in beta, but once it moves out of beta this fix will become available for everyone.

[EinfachHans]

It's merged, but not released yet i think? Looks like it is not fixed in 17.4.1

[liamdebeasi]

I believe it was fixed in iOS 17.5.

edit: Whoops looks like iOS 17.5 is still in beta. I'll make a note of this above.

[EinfachHans]

Ahh yes i see, thank you!

Also i really appreciate that the ionic team forwards webkit bugs directly to the apple team 🙌🏼👍🏼

[philmmoore]

I'm on 17.5 beta but I'm still seeing the flicker :(

[elbrinner]

I have the same problem, but in my case, it is infinite flashing

[dbousamra]

Also seeing issue

[philmmoore]

Hey @liamdebeasi I'm still seeing this in the latest beta release for 17.5 should we expect this to be resolved now?

https://github.com/ionic-team/ionic-framework/assets/2862059/ef482843-86b7-4170-b1c2-887f628ac035

[maximilien0405]

I'm still having this issue on modals on IOS 17.5 public beta !

[EinfachHans]

@maximilien0405 ios 17.5 already has been released. Please check the final release, i don't have the problem anymore

[maximilien0405]

@EinfachHans I'm still having it.. sometime it flickers like in the video @philmmoore sent, sometime the backdrop dosen't have any fade-out animation and just disappears :/

[EinfachHans]

@maximilien0405 then i would recommend open a new issue with a small repo where the team can reproduce the issue and decide if it is an ionic or webkit bug

[felixhirschfeld]

I am also still seeing this in iOS 17.5.1. I use the isOpen to handle the modal and this to fix the flash completely in React:

<IonModal isOpen={isOpen} showBackdrop={isOpen} />

[Vasile-Peste]

The issue persists on latest version of iOS

[moerphie]

Still facing this issue in iOS as well as Chrome and Safari on macOS.

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.