IOS 7 Chrome - фиксированный позиционный ящик не остается внизу, когда всплывает виртуальная клавиатура

У меня есть нижний ящик, который фиксируется в нижней части. При нажатии, выдвижной ящик будет выдвигаться вверх и показывать больше контента. На iOS 7, когда пользователь вводит тег ввода или тег textarea, появляется виртуальная клавиатура. Однако ящик выдвигается на странице, а не прилипает к основанию, когда появляется клавиатура. Пожалуйста, смотрите на рисунке ниже.

Сначала я столкнулся с проблемой Safari, но я добавил следующий код, чтобы изменить фиксированную позицию на абсолютную, когда клавиатура открыта:

// 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:

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

Это исправление работает в Safari на iOS 7, но оно не работает в Chrome. Кроме того, есть проводящее поведение:

Если на странице есть тег ввода, и я нажимаю на него на iPad, тогда открывается виртуальная клавиатура и выдвигается ящик. Если ящик появился, а затем накройте меня, я нажал, событие щелчка на самом деле срабатывает в ящике. Почему это?

Как я могу решить эту проблему? (Я искал какое-то время, но как отлаживать Chrome на iOS?)

Большое спасибо за вашу помощь!

Обновление

Я использовал следующий код, чтобы определить, является ли это Chrome на iOS 7, если это так, я скрываю ящик, когда виртуальная клавиатура встает, и повторно показывайте ящик, когда виртуальная клавиатура опущена.

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:

.chromefixfixed #drawer {
    display: none;
}

Остается вопрос: как заставить Chrome на iOS 7 работать как Chrome на Android (не скрывая ящик при закрытии клавиатуры)?

Спасибо за помощь!

Ответ 1