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

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

Hope you found this post useful...

...so please read on! I love writing articles that provide beneficial information, tips and examples to my readers. All information on my blog is provided free of charge and I encourage you to share it as you wish. There is a small favour I ask in return however - engage in comments below, provide feedback, and if you see mistakes let me know.

If you want to show additional support and help me pay for web hosting and domain name registration, donations, no matter how small, are always welcome!

Use of any information contained in this blog post/article is subject to this disclaimer.
comments powered by Disqus
Other posts you may like...