Angular Visualforce is freezing in IPad

Question

Background

We have a simple VF page that is made using AngularJS+Bootstrap.

The page works perfect in browsers (Desktop, Mobile, Iphone and Android S1 app). There is not errors (javascript or apex), we've checked all consoles and debugging ways.

Issue

However, randomly it freeze in S1 IPad App when we tap a <button >. 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 info

• This is the main tag: <apex:page showheader="false" sidebar="false" standardStylesheets="false" standardController="Store_Visit__c" extensions="StoreVisitController" applyBodyTag="false" applyHtmlTag="false" docType="html-5.0">
• We've added this: <meta name="viewport" content="initial-scale=1.0001, minimum-scale=1.0001, maximum-scale=1.0001, user-scalable=no"/>
• To avoid gray screen we have this: https://developer.salesforce.com/forums/?id=906F0000000kDtLIAU
• Also, followed this : https://success.salesforce.com/issues_view?id=a1p30000000T5l1AAC

Question

Is any way to debug the WebView that Salesforce1 uses for VF Pages? I think that will help to see the console of that safari.

Any help out there? Thanks in advance

Answer 1

We've found the solution. I'm positing it in case other struggle the same issue.

After opening a case, Salesforce told as that that was a known issue for them. It is caused by the version of WkWebview they are using. Technically, the render engine of that webView as problems with certain kind of display:none/block that are used by Angular or others JS Frameworks.

The solution

Quite simple, just update to iOS 10 :)