Igor Kromin |   Consultant. Coder. Blogger. Tinkerer. Gamer.

NOTE: This article is 3 years or older so its information may no longer be relevant. Read on at your own discretion! Comments for this article have automatically been locked, refer to the FAQ for more details.
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.
safarifixeddivissue.png


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

Skip down to comments...
A quick disclaimer...

Although I put in a great effort into researching all the topics I cover, mistakes can happen. If you spot something out of place, please do let me know.

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.
 
comments powered by Disqus
Other posts you may like...