title: WkWebview is freezing with Angular
body: <h2>Background</h2>
  
  <p>We have a simple <strong>Angular+Bootstrap</strong> app that is running in an external application that uses <strong>WkWebview</strong> to embed our page. The app works fine in Desktop all OS's, Android and Iphone. 
  There are not javascript errors or CSS warns. </p>
  
  <h2>Problem</h2>
  
  <p>However, <strong>randomly</strong> it freezes running in IPad when we tap a <code>&lt;a href="#screen2"</code>. This trigger a change on the <code>routerProvider</code> 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.</p>
  
  <h2>Weirdness</h2>
  
  <p>If we change the orientation to landscape the screen is unlocked. If we turned again to portrait it lock again.</p>
  
  <h2>Additional</h2>
  
  <p>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: </p>
  
  <pre><code>(function(){
    try{
        var a=navigator.userAgent;
        if((a.indexOf('Salesforce')!=-1)&amp;&amp;(a.indexOf('iPhone')!=-1||a.indexOf('iPad')!=-1)&amp;&amp;(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)&amp;&amp;(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){}
  })();
  </code></pre>
  
  <h2>Question</h2>
  
  <p>Any workaround to solve this issue?</p>
  
  <p>Thanks in advance</p>