当在Safari中打开虚拟键盘时，如何阻止我的固定导航移动？ [英] How do I stop my fixed navigation from moving like this when the virtual keyboard opens in Mobile Safari?

问题描述

我知道移动safari在固定元素上有很多错误，但在大多数情况下，我已经设法使我的布局正常工作，直到我向底部的固定导航添加了一个非常需要的文本输入。现在当用户专注于文本输入元素并且虚拟键盘出现时，我的导航，否则始终固定在页面的底部，跳跃到页面中间的一个奇怪的地方。

I understand that mobile safari has a lot of bugs around fixed elements, but for the most part I've managed to get my layout working correctly until I added a much needed text input to the fixed navigation at the bottom. Now when the user focuses on the text input element and the virtual keyboard appears, my navigation, which is otherwise always fixed at the bottom of the page, jumps up to a really strange spot in the middle of the page.

>

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

I'd add some of my code to this post, but I wouldn't be sure where to start. That navigation is fixed at the bottom and positioned to the left and bottom 0, and 100% width. From there, I don't know what's going on, I can only assume it's a mobile safari bug.

它也似乎失去它的位置固定和成为相对，只有而文本输入元素已关注，虚拟键盘已打开。

It also appears to lose it's position fixed and become relative, only while the text input element is focused on and the virtual keyboard is open.

推荐答案

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

http://dansajin.com/2012/12/07/fix-position-fixed/ this is one of the solutions proposed. Seems worth a shot.

总之：设置固定元素到 position：absolute 当 blur 红色

In short: set fixed elements to position:absolute when any input is focused and reset them when that element is blurred

.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');
    });
}

这篇关于当在Safari中打开虚拟键盘时，如何阻止我的固定导航移动？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！