Sunday, 3 November 2019

WkWebview is freezing with Angular

Background

We have a simple Angular+Bootstrap app that is running in an external application that uses WkWebview to embed our page. The app works fine in Desktop all OS's, Android and Iphone. There are not javascript errors or CSS warns.

Problem

However, randomly it freezes running in IPad when we tap a <a href="#screen2". This trigger a change on the routerProvider in order to change the screen controller and template. It seams like a transparent layer is locking the entire screen. Or that all events (click tab scroll) are locked.

Weirdness

If we change the orientation to landscape the screen is unlocked. If we turned again to portrait it lock again.

Additional

We cant change the WkWebview for a newer. We only have control over the webapp. We know that WkWebview has several issues related to: Scrolling, focus and Display changes that affect the rendering and causes blank or freeze screen. We also are using this script to avoid blank screen on some focus events:

(function(){
             try{
                  var a=navigator.userAgent;
                  if((a.indexOf('Salesforce')!=-1)&&(a.indexOf('iPhone')!=-1||a.indexOf('iPad')!=-1)&&(a.indexOf('OS/8')!=-1||a.indexOf('OS 8')!=-1||a.indexOf('OS/9')!=-1||a.indexOf('OS 9')!=-1||a.indexOf('OS 10')!=-1||a.indexOf('OS/10')!=-1)&&(a.indexOf('Safari')==-1)){
                    var s=document.createElement('style'); 
                    if(a.indexOf('OS/8')!=-1||a.indexOf('OS 8')!=-1) {
                        s.innerHTML="html,html body{overflow: auto;-webkit-overflow-scrolling:touch;}body{position:absolute;left:0;right:0;top:0;bottom:0;}";
                    }
                    else if(a.indexOf('OS/9')!=-1||a.indexOf('OS 9')!=-1) {
                        s.innerHTML="html,html body{overflow: auto;-webkit-overflow-scrolling:auto;}body{position:absolute;left:0;right:0;top:0;bottom:0;}";
                    }
                    else if(a.indexOf('OS/10')!=-1||a.indexOf('OS 10')!=-1) {
                        s.innerHTML="html,html body{overflow: auto;-webkit-overflow-scrolling:auto;}body{position:absolute;left:0;right:0;top:0;bottom:0;}";
                    }
                    document.getElementsByTagName('head')[0].appendChild(s);}}catch(e){}})();

Question

Any workaround to solve this issue?

Thanks in advance



from WkWebview is freezing with Angular

No comments:

Post a Comment