Prevent Mobile Safari from presenting toolbar when bottom of viewport is tapped

Question

We have a simple mobile app running in Mobile Safari (MS) on iOS. When the user scrolls down the page n pixels, a \"top\" button slides up from the bottom. The top butt

Answer 1

Here's how I'm dealing with this. With a position:fixed;bottom:0 toolbar of my own, I'm adding 44px offset to it (with a semi-transparent buffer zone) shortly after the safari toolbar is hidden (as this is the scenario where a tap near the bottom will reveal the toolbar again).

var min_inner_height = false;
var max_inner_height = false;

var passiveIfSupported = false;
try {
    window.addEventListener("test", null, Object.defineProperty({}, "passive", { 
        get: function () { 
            passiveIfSupported = { 
                passive: true 
            }; 
        } 
    }));
} catch (err) {}

document.addEventListener('scroll', function (e) {
    var win_inner_h = window.innerHeight;
    if (/iPad|iPhone|iPod/.test(navigator.userAgent)) {
        if (min_inner_height === false || win_inner_h < min_inner_height) {
            min_inner_height = win_inner_h;
        }
        if ((max_inner_height === false || win_inner_h > max_inner_height) && win_inner_h > min_inner_height) {
            max_inner_height = win_inner_h;
        }
        if (max_inner_height !== false && max_inner_height == win_inner_h) {
            addElementClass(document.body, 'safari-toolbars-hidden');
        } else {
            removeElementClass(document.body, 'safari-toolbars-hidden');
        }
    }
}, passiveIfSupported);

This basically adds the .safari-toolbars-hidden class to the sometime around when they disappear due to the user scrolling down the page.

At this point, I move my own toolbar up the page:

.my-bottom-toolbar { 
    bottom: 0px;
    position: fixed;
}

@supports (-webkit-overflow-scrolling: touch) {
    /* CSS specific to iOS devices */
    .my-bottom-toolbar {
        box-shadow: 0 44px 0 rgba(255, 255, 255, 0.8);
        transition: bottom 0.15s ease-in-out; 
    }
    .safari-toolbars-hidden .my-bottom-toolbar {
        bottom: 44px;
    }
}

Hope this helps someone!

Instead of offsetting by a further 44px, you could also add an extra 44px of bottom padding if that works better for your case.