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..

score 6 · Accepted Answer · answered Oct 12 '20 at 06:55

6

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.

answered Oct 12 '20 at 06:55

Gowtham S

923
14
39

Hello. Is there any ticket, post, or news about that issue on sencha's website? If yes, could you share it, please? – coceban.vlad Oct 15 '20 at 17:14
I was never so happy to find a solution on SO. This issue made my life hell. This fix works for me :) – Indraneel Pole Jan 06 '21 at 13:16
1

This fix relevant for **sencha touch** as well, including Cordova-based projects – olegtaranenko Jan 21 '21 at 09:31
1

@coceban.vlad Ticket was raised in the sencha support portal "EXTJS-29089", not sure about the status of this issue and the release. – Gowtham S Feb 05 '21 at 12:30

score 2 · Answer 2 · answered May 24 '21 at 10:53

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;
}

score 0 · Answer 3 · answered Oct 07 '20 at 04:40

0

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.

answered Oct 07 '20 at 04:40

Andre

475
3
6

Yeah @Andre, Got a fix from sencha support and update in the fiddle to test it, now its working fine for components. check the index.html file for the style fix. Will post it here.. – Gowtham S Oct 12 '20 at 06:52
Not sure this is due to iOS 13.4 + upgrade on wkwebview or something related to sencha framework itself. – Gowtham S Oct 12 '20 at 07:03
Even in iOS14 also the same "component painted event not fired" exists. – Gowtham S Oct 12 '20 at 07:05

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

3 Answers3