在Mobile Safari中打开虚拟键盘时,如何阻止我的固定导航像这样移动？

Question

据我所知,移动safari在固定元素周围有很多错误,但在大多数情况下,我已经设法让我的布局正常工作,直到我在底部的固定导航中添加了一个非常需要的文本输入.现在,当用户关注文本输入元素并出现虚拟键盘时,我的导航(否则始终固定在页面底部)会跳到页面中间的一个非常奇怪的位置.

我会在这篇文章中添加一些代码,但我不确定从哪里开始.导航固定在底部,位于左侧和底部0,宽度为100%.从那里,我不知道发生了什么,我只能假设它是一个移动的safari bug.

只有当文本输入元素被聚焦并且虚拟键盘打开时,它似乎也会失去它的位置固定并变得相对.

Answer 1

http://dansajin.com/2012/12/07/fix-position-fixed/这是提出的解决方案之一.似乎值得一试.

简而言之:将fixed元素设置position:absolute为focus编辑任何输入时,并在该元素为blur红色时重置它们

.header { 
    position: fixed; 
} 
.footer { 
    position: fixed; 
} 
.fixfixed .header, 
.fixfixed .footer { 
    position: absolute; 
} 

和

if ('ontouchstart' in window) {
    /* cache dom references */ 
    var $body = $('body'); 

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

Answer 2

顶部的解决方案是解决问题的一些方法,但我认为添加额外的css类或使用moderniz我们使事情复杂化.

如果你想要一个更简单的解决方案,这里有一个非现代化的 非extra-css但是纯jquery解决方案,并且可以在我的所有项目上使用这个修复的每个设备和浏览器上运行

if ('ontouchstart' in window) {
    $(document).on('focus', 'textarea,input,select', function() {
        $('.navbar.navbar-fixed-top').css('position', 'absolute');
    }).on('blur', 'textarea,input,select', function() {
        $('.navbar.navbar-fixed-top').css('position', '');
    });
}

Answer 3

我遇到了类似的问题,但是我找到了一个解决方法,将以下css类添加到输入焦点上的body元素,然后在unfocus上再次删除它:

.u-oh {
    overflow: hidden;
    height: 100%;
    width: 100%;
    position: fixed;
}