Visualforce page automatically scrolls to top when user taps on a page element in Salesforce1 on iOS devices
Last updated 2017-04-05 ·Reference W-2187727 ·Reported By 149 users
No Fix
Summary
This issue affects the Salesforce1 for iOS hybrid app and the Salesforce1 browser app in iOS Safari.
When a user is using a Visualforce page and they tap on a picklist or multi-picklist field then the Visual Force page scrolls to the top and the user loses focus on the area of the page they were in.
Repro
1) Open a Visualforce page in Salesforce1 that has a height greater than the screen height.
2) Tap a picklist/multi picklist field near the bottom of the page (other elements may also be affected depending on the implementation).
3) Notice the page automatically scroll to the top.
Workaround
The following two workarounds are not guaranteed to work for every implementation, not supported by Salesforce, and you should use them at your own risk.
1) Add the following JavaScript to your page:
<script>
(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('Safari')==-1)){
var s=document.createElement('style');
s.innerHTML="html,html body{overflow: auto;-webkit-overflow-scrolling:touch;}body{position:absolute;left:0;right:0;top:0;bottom:0;}";
document.getElementsByTagName('head')[0].appendChild(s);}}catch(e){}})();
</script>
2) Add the following JavaScript to your page:
<script>
var ua=navigator.userAgent;
if((ua.indexOf('Salesforce')!=-1)&&(ua.indexOf('iPhone')!=-1||ua.indexOf('iPad')!=-1)&&(ua.indexOf('OS/8')!=-1||ua.indexOf('OS 8')!=-1)&&(ua.indexOf('Safari')==-1)){
function IOS_SCROLL_BOOTSTRAP() {
var children = Array.prototype.slice.call(document.body.children),
placeholder = document.createElement('section'),
fragment = document.createDocumentFragment(),
styles,
width,
height;
children.forEach(function(c){fragment.appendChild(c);});
placeholder.appendChild(fragment);
styles = [
'width:100%;',
'height:', (window.screen.height - 42), 'px;',
'position: absolute; overflow: auto; -webkit-overflow-scrolling: touch'
].join('');
placeholder.style.cssText = styles;
document.body.appendChild(placeholder);
}
window.addEventListener('load', function (e) {
IOS_SCROLL_BOOTSTRAP();
});
}
</script>
Reported By (149)





















































































Is it Fixed?
Any unreleased services, features, statuses, or dates referenced in this or other public statements are not currently available and may not be delivered on time or at all. Customers who purchase our services should make their purchase decisions based upon features that are currently available.