I realized that somehow iscrollview was able to disable the address bar of Safari completely and make it feels like an app. Even scrolling down, the address bar doesn't show up. As a matter of fact, you CANNOT get the address bar back unless you hit Back or Forward.
iscrollview:
https://github.com/watusi/jquery-mobile-iscrollview
I looked at this old thread and it mentioned on jumping to the position that just happened to hide the bar temporarily: How does jquery mobile hide mobile safari's addressbar?
That wasn't what I am talking about. So how did iscrollview disable the Safari bar completely? Anyone knows?
UPDATE 1:
This is an attempt to make page's height same as display to scroll only inside. But when I scroll down all the way, it still pulls down the Safari address bar. Basically, #home is the page and #main is the content within it. I added this css :
#home, body
overflow: hidden
#main
overflow-y: scroll
-webkit-overflow-scrolling: touch
This is the JS to change height on the fly:
$('#main').css({
'height': ($(document).height()) + 'px'
});
$(window).resize(function () {
$('#main').css({
'height': ($(document).height()) + 'px'
});
});