IOS 7 Safari: prevents UI chrome from appearing differently when scrolling up and scrolling down

Question

Currently, when a page scrolls in Safari iOS 7 (11A4449D), the chrome title reduces the size, and clicking anywhere below 44px of the viewport results in a bottom pane of the footer (with links to the next / previous page, etc.). .

Conversely, scrolling up the page supports a footer bar and a larger header bar. Is there any meta tag (or similar) to prevent this behavior so that it is consistent for both scrolling and scrolling down?

We could get around the problem if the browser fired some JS event when the chrome came in / out of view, but that is not the case.

Answer 1

As an update:

In the end, we ran into this problem using bottom: 0; instead of top: 100%; in CSS. We wanted to use top: 100% in the first instance, as this meant that the elements added to this element would be displayed down (off) automatically.

Using the reverse approach, we just need to manually translate the area (using JS) with an equal amount as the item to be added.

The result is a “sticky” footer standing over the bottom of the OS chrome when it appears.