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.

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.
.tb_form_popup {
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:
-webkit-overflow-scrolling : touch !important;
overflow: auto !important;
height: 100% !important;


Have comments or feedback on what I wrote? Please share them below!
comments powered by Disqus
Other posts you may like...