ExtJS Modern : Painted Event is not triggered in iOS 13.4+ WKWebview

Question

In sencha Extjs 6.5.3 and 7.0.2 Modern the painted event is not triggered for all components and containers, please find the below fiddle which increment when clicked from Android,windows and even on Mac Safari, but not incrementing on iOS WKWebView (custom) and safari.

Is there any way to manually fire the painted event based on DOM Events or any alternative to the painted event? It was working on below 13.4 (iOS).

Please find this Sencha Fiddle Sample

Not working in ios 13.5.1

Working fine in Desktop chrome and Android devices..

Answer 1

Add this style fix to app.scss. Thanks to Sencha Support.

.x-paint-monitor.cssanimation {
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

Now working fine.

Answer 2

This problem seems to be fixed in Safari 14 (iOS and Mac).

Your test Fiddle is green on my iPhone and Mac with version 14.

Answer 3

This alone did not work for us.

Add this style fix to app.scss. Thanks to Sencha Support.

.x-paint-monitor.cssanimation {
   -webkit-animation-fill-mode: forwards;
   animation-fill-mode: forwards;
}

Now working fine.

We had issues in all webkit browsers (Chrome, Edge, Brave, Android webview,...).

The fix: increase the animation duration from 0.0001ms to al least 0.001ms (we set it to 0.01ms).

.x-paint-monitor.cssanimation {​​​​​​​
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-duration: 0.01ms;
    animation-duration: 0.01ms;
}​​​​​​   ​