iOS 7 Chrome - Fixed position drawer doesn't stay at bottom when virtual keypad pops up

Question

I have a bottom drawer which is fix positioned at the bottom. When tapped, the drawer will slide up and show more content. On iOS 7, when user taps on input tag or textarea tag, the virtual keyboard pops up. However, the drawer jumps up on the page instead of sticking to the bottom when keypad pops up. Please see the diagram below for illustration.

I firstly encountered the issue also on Safari, but I added the following code to change the fixed position to absolute when keypad is open:

// Apple.Device detects if it is an apple device
if (Modernizr.touch && Apple.Device) {
    /* cache dom references */ 
    var $body = jQuery('body'); 

    /* bind events */
    $(document)
    .on('focus', 'input, textarea', function(e) {
        $body.addClass('fixfixed');
    })
    .on('blur', 'input, textarea', function(e) {
        $body.removeClass('fixfixed');
    });
} 

CSS code:

.fixfixed #drawer {
    bottom: 0;
    margin-left: auto;
    margin-right: auto;
    position: absolute;
    left: 0;
    right: 0;
}

This fix works on Safari on iOS 7 but it doesn't work on Chrome. Also, there is a weired behavior:

If there is an input tag on the page and I tap on it on iPad, then the virtual keyboard opens and the drawer jumps up. If the drawer happens to then cover the I clicked on, the click event actually fires on the drawer. Why is that?

How can I resolve this issue? (I've been searching for a while but how do I debug Chrome on iOS?)

Many thanks for your help!

Update

I've used the following code to detect if it is Chrome on iOS 7, if so, I hide the Drawer when the virtual keyboard is up, and re-display the drawer when virtual keyboard is down.

function iOSversion() {
    if (/iP(hone|od|ad)/.test(navigator.platform)) {
        // supports iOS 2.0 and later: <http://bit.ly/TJjs1V>
        var v = (navigator.appVersion).match(/OS (\d+)_(\d+)_?(\d+)?/);
        return [parseInt(v[1], 10), parseInt(v[2], 10), parseInt(v[3] || 0, 10)];
    }
}

var iosVersion = iOSversion();

if (navigator.userAgent.match('CriOS') && iosVersion[0] == '7') {
   $(document).hammer().on('tap', 'input, textarea', function(e) {
            $('body').addClass('chromefixfixed');
        })
            .on('blur', 'input, textarea', function(){
                body.removeClass('chromefixfixed');
            })
}

CSS code:

.chromefixfixed #drawer {
    display: none;
}

Still the question remains: how do I get Chrome on iOS 7 to work like Chrome on Android (without hiding the drawer when keyboard is up)?

Thanks for the help!

Answer 1

Position fixed bottom and position absolute bottom are an absolute nightmare on iOS and android devices, in my experience it's just not possible to get it to render consistently even across the most modern devices, let alone the older ones that dominate the market currently. So much so, that as a dev I would ask a designer to rethink the layout because of it. I believe it's called "sidestepping the turd".