IOS 7 Safari auto shrinking/hiding UI elements not working when scroll

iosios7mobilesafariscroll

When you scroll on a web page in iOS 7s Safari the URL bar shrinks and the bottom navigation bar disappears. In the site I am working on these two things to not happen.

The momentum/inertial scrolling was not working as well until I added -webkit-overflow-scrolling: touch; to the html element.

I can't imagine what element I have added to the code to have it lock up Mobile Safari like this.

Hoping this isn't a repeat question, it's hard to know what to call this besides "shrinking/hiding".

Best Answer

I accidentally stumbled upon the solution last night in an article by Maximiliano Firtman's article Breaking the Mobile Web. The article points out many issues with the new Mobile Safari in iOS 7.

The solution to my problem was close to his answer (his being if there is overflow: scroll; on your page it will not trigger the auto UI hide feature) mine was an overflow: hidden; style.