Apex Code Development You need to sign in to do that
Don't have an account?
Scrolling up in Salesforce1 for iOS results in blank page
Hi,
This is a strange problem that I'm facing. I've a mobile VF page (SPA) using JQueryMobile and whenever I try to scroll up in iOS, it results in blank page. However, also noted that if I wait for sometime (somewhere between 10 secs to 2 mins) I am able to scroll up/down normally without any blank screen. Probably the page needs sometime to load properly in iOS, however, since I've not idea the time it finishes up loading, I cannot resolve this issue. Any help would be welcome.
Note: This page works fine in Android, not issues at all.
Apex Controller:
Additional Links:
While sarching for information on this, also found this known issue which reports similiar issue being fixed in Winter'16 Patch 9.4 release. However, evidently, the problem remains:
https://success.salesforce.com/issues_view?id=a1p300000008Y6nAAE
Thanks,
Ayan
This is a strange problem that I'm facing. I've a mobile VF page (SPA) using JQueryMobile and whenever I try to scroll up in iOS, it results in blank page. However, also noted that if I wait for sometime (somewhere between 10 secs to 2 mins) I am able to scroll up/down normally without any blank screen. Probably the page needs sometime to load properly in iOS, however, since I've not idea the time it finishes up loading, I cannot resolve this issue. Any help would be welcome.
Note: This page works fine in Android, not issues at all.
Code Sample
Visualforce:
<apex:page docType="html-5.0" applyHtmlTag="false" controller="TemporaryApexController" showHeader="false" sidebar="false" standardStyleSheets="true" id="MobilePage" readOnly="true">
<head>
<title>Test iOS Scrolling Page</title>
<meta id="viewport" name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, user-scalable=1"></meta>
<meta name="apple-mobile-web-app-capable" content="yes"></meta>
<!-- JQuery Mobile -->
<apex:includeScript value="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.min.js"/>
<apex:styleSheet value="https://ajax.aspnetcdn.com/ajax/jquery.mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<apex:includeScript value="https://ajax.aspnetcdn.com/ajax/jquery.mobile/1.3.1/jquery.mobile-1.3.1.min.js"/>
</head>
<body>
<!-- ------------------------ -->
<!-- -------- Page 1 -------- -->
<!-- ------------------------ -->
<div data-role="page" id="page1">
<!-- header -->
<div data-role="header" class="header-large" data-theme="c" id="page2Header">
<h2>Test Data</h2>
</div>
<!-- /header -->
<!-- content -->
<div data-role="content" style="text-align:center">
<div style="overflow:auto;">
<table data-role="table" data-mode="columntoggle" class="ui-responsive ui-shadow" id="activeOppTable">
<thead>
<tr>
<th data-priority="1">Account Name</th>
</tr>
</thead>
<tbody>
<apex:repeat value="{!accList}" var="accVar">
<tr>
<td>{!accVar.Name}</td>
</tr>
</apex:repeat>
</tbody>
</table>
</div>
</div>
<!-- /content -->
</div> <!-- /page -->
</body>
</apex:page>
Apex Controller:
public class TemporaryApexController
{
public List<Account> accList {get;set;} {accList = new List<Account>();}
public TemporaryApexController(){
accList = [select Id, Name from Account LIMIT 50];
}
}
Additional Links:
While sarching for information on this, also found this known issue which reports similiar issue being fixed in Winter'16 Patch 9.4 release. However, evidently, the problem remains:
https://success.salesforce.com/issues_view?id=a1p300000008Y6nAAE
Thanks,
Ayan
Not sure if you're still struggling with this, I've seen similar issues in an VF app we're working on for Salesforce1 and wanted to share our experiences.
For us, it seems that this issue could be somehow tied to our app having a div on our page that as a load mask. It's a simple div with width and height at 100% that we show and hide. We were mainly viewing the VF app from an iPad via Salesforce1. Some clues that lead us to this determination was that when we got to the white screen / blank screen, we noticed that if we were to long press on the screen to bring up the iPad's text selection tool, the page components were still there, but overlayed somehow. We removed our div and code which used our load mask and it seemed to help immensely. From your sample code, it doesn't look like you have that, but i'm not familiar enough with how jqueryMobile does page transitioning or any added effect that it may be performing.
Our app still needed the "load mask" type of functionality, and we haven't found a foolproof way which didn't cause the screen to blank, but we've found a Salesforce1 workaround. Our VF app runs as a full page app and is launched from a main Salesforce1 navigation "tab" which allows this workaround to be "acceptable". What we do is basically force our app to jump out of the iframe that typically holds the VF page. we have a special VF page which simple redirects to our main app with the following javascript code
top.window.location = "/apex/myApp";
This is definitly a "hack", but it does allow out app to run with the load mask and without experiencing the blank screen. BUT one HUGE down side to this hack is that you lose the ability to resume the app after the iPad goes to sleep and re-wakes.
Our plan right now is to eventually remove the hack/workaournd mentioned above and figure out a what it is about our load masking that Salesforce1 doesn't like.
Hope this helps!