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

[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?

trim.E0F334D7-954E-4780-AD3A-4B2AB63C84F3.MOV