bug: webkit iOS 17, animation flicker

[moerphie]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• 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.

Preview.mp4

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