Salesforce 1 viewport issue in ios

Question

I have been creating visualforce pages for salesforce 1 mobile app for ios. On scrolling the page the button seems not to be clicked as the viewport moves.

Can somebody suggest any thing?

thank you

Answer 1

You can any one following script in your page

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>