IOS 7 - Fixed toolbar bug on virtual keyboard
I have created an application that runs in a browser and supports chat. It is for desktop and mobile and appears as a fixed footer.
On the desktop everything works and looks great, but when it gets to the mobile I see a strange problem.
When I am not at the top of the page and do not open the keyboard, everything works fine:
but if i am near the top of the page, the toolbar crashes and appears halfway up the page:
I found the following link where someone else mentions this, but I cannot hide the footer as I need it: 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, I read that iOS added support for fixed position but seems to have broken for this case (opening the virtual keyboard from the top of the web page).
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.
source to share
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 only saw the above problem when we were not at the top of the page. This primarily throws you to the top of the page.
We've added some javascript to handle this by storing your old position in a variable and moving it there when it's done.
source to share