This issue made my life hell.! Yes I can sum up this problem in this one line. So first of all, I am one of those very few developers around the globe who use Sencha/Ext for a mobile application. It is an old application that needs to be supported from time to time for both Android and iOS.
In December 2020, we realized that suddenly after updating to iOS 14, one of the features that uses html canvas not working anymore on iPhone and iPads. The first thought was something is broken on Canvas, because we couldn't draw anything on it. So I started debugging the part of code where I am initializing and using Canvas. Everything looks good. On top of it, it works fine for Android. So the next thought came to mind was something specific to iOS libraries is not working. But it was plain html css code that wasn't working. I couldn't figure out why.
An extensive debugging revealed that issue was with paint event of EXT JS. It wasn't being fired. Thus code written inside this Paint Event subscription wasn't reached.
Now why does paint events are not triggered? NO IDEA WHY.
But it was one step closer to the solution. Finally after fiddling through Stack Overflow, I found this question that saved my life.
Actually this is a css issue. Just add following code to your app.css and it works
.x-paint-monitor.cssanimation { -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; }
For webkit, with new iOS update something is going wrong with css animation that cannot be triggered which creates a problem with paint event triggers. Yeah, talk about strange issues.
When I read a little bit more about animation-fill-mode, found following explanation - >
Setting animation-fill-mode: forwards means that after the animation has completed execution, the animation will hold at final properties until it is removed.
Which would mean that EXTJS is expecting some animation state to fire the paint event that was probably changed in webkit-webview.
I didn't get time to delve deep into iOS changeset. But if I get any time, I will update this blogpost for the same.
Till then. I hope this helps someone like me in distress. :)