I'm working on a special site which is quite "stupid". It's supposed to be very flashy with a lots of animations, and on this be responsive. The body element is set to overflow: hidden; and the scruture looks something like this:
<div id="wrapper">
<div class="content"> Some content with down button goes here ...</div>
<div class="content"> Some content with up/down button goes here ...</div>
<div class="content"> Some content with up/down button goes here ...</div>
<div class="content"> Some content with up button goes here ...</div>
</div>
each .content has a up/down navigation button which will scroll you to each div. These are full width and height and if the content is "too big" the div itself is scrollable. That is, you "can't" scroll to next content by just keep scrolling - you have to use the navigation to go to next div.
Since resizing alters the content, the alignment of .content can crash. That is, two content-divs can be visible (like 80% of #1 and 20% of #2. There fore i have a function which "restes" the page and gets you to the top (.content #1) on resize.
This works fine on desktops (and in chrome on android) but then there's iOS and safari. The adress bar is visible, and the classic window.scrollTo(0,0); (or window.scrollTo(0,1);) wont work. fine. i can live with that. But, in some cases, when you scroll in the content, safari just can think "hey, let's hide the address bar now" (i have not really figured out how this logic is) and this is seen as a rezise which brings you to the top.
So, is there any smart way of always keeping the address bar visible, or for that matter always hide it?
Or any other ideas to solve this issue?
