当虚拟键盘在 Mobile 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 错误.

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.

简而言之:将 fixed 元素设置为 position:absolute 当任何输入被 focused 并在该元素为 时重置它们模糊红色

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

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