I've come across an issue in Mobile Safari while working on my travelblog.ws where 'fixed DIV' popup forms would cause the page behind the popup to scroll up as soon as the form was displayed. I narrowed this down to the jQuery .focus() method, but that wasn't the cause of the problem. Once I disabled auto-focusing of the first input field in my forms and manually selected an input field, the same behaviour manifested. I did manage to fix the issue eventually though.
This is a cut down version of my CSS class for the input forms that pop up. As you can see it uses fixed positioning so in theory shouldn't affect the rest of the page.
CSS
.tb_form_popup {
top:0;
width:500px;
position: fixed;
box-shadow: 0px 0px 150px 60px #555;
border: 2px solid #4093E6;
}
The video below shows the incorrect behaviour that I was seeing...You can see as soon as an input field is focused the whole page jumps and once the form is closed the scroll location is back to the top.
So how did I fix this? By adding the following CSS to the html and body elements:
CSS
html,body{
-webkit-overflow-scrolling : touch !important;
overflow: auto !important;
height: 100% !important;
}
-i
A quick disclaimer...
Although I put in a great effort into researching all the topics I cover, mistakes can happen.
Use of any information from my blog posts should be at own risk and I do not hold any liability towards any information misuse or damages caused by following any of my posts.
All content and opinions expressed on this Blog are my own and do not represent the opinions of my employer (Oracle).
Use of any information contained in this blog post/article is subject to this disclaimer.
