iOS 7 - 固定页脚工具栏在虚拟键盘上中断 [英] iOS 7 - Fixed footer toolbar breaks on virtual keyboard
问题描述
我创建了一个在浏览器中运行并提供聊天支持的应用程序。这适用于桌面和移动设备,并且显示为固定的页脚。
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:
我找到了以下链接,其他人提到它,但我无法隐藏页脚,因为我需要它显示:
http://forum.jquery.com/topic/how-to-set-页脚固定在底部 - 甚至是虚拟键盘 - 打开
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
任何关于如何解决这个问题的建议都会很有帮助se,我读到iOS增加了对固定位置的支持,但在这种情况下似乎被打破了(从网页顶部打开虚拟键盘)。
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).
这是我的代码:
#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;
}
谢谢。
推荐答案
令人难以置信的hacky修复:
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.
我们添加了一些javascript代码来处理这个问题,同时保存你在变量中的旧位置,并将你移回曾经做过。
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.
这篇关于iOS 7 - 固定页脚工具栏在虚拟键盘上中断的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!