iOS 7 - Fixed footer toolbar breaks on virtual keyboard

Question

I have created an application which runs in the browser and provides chat support. This is for desktop and for mobile and appears as a fixed footer.

On desktop, everything is working and looking great, but when it hits mobile I am seeing an odd issue.

When I am not at the top of the page and open the keyboard, it all works okay:

but if I am near the top of the page the toolbar breaks and appears half way up the page:

I found the following link where someone else mentions it but I can not hide the footer as I need it shown: http://forum.jquery.com/topic/how-to-set-footer-fixed-at-bottom-even-if-virtual-keyboard-is-open

Any advice on how to fix this would be great please, I read that iOS added support for fixed position but seems to be broken for this case (opening the virtual keyboard from the top of the webpage).

Here is my code:

#gc_toolbar_layout {
    ...
    position: fixed;
    word-break: keep-all;
    word-break: break-word;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}

Thank you.

Answer 1

Incredibly hacky fix:

$(document).on('focus', 'textarea', function() {
    $("#gc_chat_layout").css({position: 'relative', float: 'right', bottom: 'auto'});
    $(document).scrollTop($(document).scrollTop());
});
$(document).on('blur', 'textarea', function() {
    $("#gc_chat_layout").css({position: 'fixed', float: 'none', bottom: '0'});
});

We were only seeing the above issue when we were not at the top of the page. This basically throws you to the top of the page instantly.

We added some javascript code to handle this as well by saving your old position in a variable, and moving you back there once done.