> Dealing with the bottom browser bar on mobile Safari

bottom bar void

If you use iScroll or any web app that takes advantage of touch events you’ll sooner or later stumble in an annoying bug: when you swipe over the bottom browser bar the touchend event is not fired and the application freezes. Here I’m trying to explain why this happens and how to fix it.

Why this happens

I have a video showing this behavior.

In most web apps you are making some checks on display size and rotation to place all the elements correctly on screen. If iPhone is in landscape mode you probably need to reduce the size of your main central content area, or maybe you need to change the location of a footer bar.

All these adjustments are needed but force the document size to be smaller than the browser window. The whole browser window consists of the document size (or the space taken by all elements of your page) AND the space beneath the browser bar. So when you are resizing objects to fit in the visible area of the screen you are actually creating a 44 pixels wide void (the browser bar height) at the bottom of the browser window.

Think of the bottom bar as a layer on top of your page. If you could make it transparent you’d see a grey area which Safari couldn’t understand how to deal with.

This vacuum area drives the javascript event handler crazy, but –luckily for us– the solution is as simple as filling the void.

How to fix it

Ensure to expand your document size by 44 pixels to the bottom. You could simply add a padding-bottom:44px to the body or an element at the bottom of the page with height:44px or anything that makes your application going beneath the browser bar.

Beneath the browser bar there must be something. If your application ends just above it, the void will suck you.

Of course you’ll also need to find a way to prevent the user to scroll into the exceeding 44px area, but this can be easily done with a preventDefault() in the touchmove event.

Note: this problem doesn’t arise in full screen mode as there’s no browser bar and the browser window is equal to the application size.

/Share the joy

/Reactions