Streaming live at 10am (PST)

How is this site solving the Mobile Safari app bar issue?


#1

Hi All,

We've got an issue with the Mobile Safari App Bar that we're trying to solve - HELP!

What we need to understand is how this example achieves the below - http://areteaesthetics.com/

If you load the page up in safari you'll notice that the page is contained above the app bar, exposing the down arrow to the user which would otherwise be hidden behind the app bar should you be using 100vh sections/divs etc. It also appears that the page begins below the URL bar.

We've got a problem where a link appears below the app bar on a page with two divs set to 50vh height each. In the bottom one there is a link which floats behind the app bar.

The example above seems to have solved these problems, the question is how???

We can't find anything in the JS or CSS that might explain it so we are hoping your good selves may be able to spot it for us.

If you can provide a run down on how this is being achieved we'd be eternally grateful!

Cheers


#2

Anyone have any insight?


#3

This has been filed as a bug many times, and every time classified under RESOLVED WONTFIX.

With this explanation:

This is completely intentional. It took quite a bit of work on our part to achieve this effect.:slight_smile:

The base problem is this: the visible area changes dynamically as you scroll. If we update the CSS viewport height accordingly, we need to update the layout during the scroll. Not only that looks like shit, but doing that at 60 FPS is practically impossible in most pages (60 FPS is the baseline framerate on iOS).

It is hard to show you the “looks like shit” part, but imagine as you scroll, the contents moves and what you want on screen is continuously shifting.

Dynamically updating the height was not working, we had a few choices: drop viewport units on iOS, match the document size like before iOS 8, use the small view size, use the large view size.

From the data we had, using the larger view size was the best compromise. Most website using viewport units were looking great most of the time.

From here: https://nicolas-hoizey.com/2015/02/viewport-height-is-taller-than-the-visible-part-of-the-document-in-some-mobile-browsers.html

There are JS hacks mentionned in the comments of the page.


#4