iOS 7 Chrome - 弹出虚拟键盘时固定位置抽屉不会停留在底部答案

【问题标题】：iOS 7 Chrome - Fixed position drawer doesn't stay at bottom when virtual keypad pops upiOS 7 Chrome - 弹出虚拟键盘时固定位置抽屉不会停留在底部
【发布时间】：2013-11-07 00:57:13
【问题描述】：

我有一个固定在底部的底部抽屉。点击时，抽屉将向上滑动并显示更多内容。在 iOS 7 上，当用户点击 input 标签或 textarea 标签时，虚拟键盘会弹出。但是，当键盘弹出时，抽屉会在页面上跳起来而不是粘在底部。请参阅下图进行说明。

我第一次在 Safari 上也遇到了这个问题，但是我添加了以下代码，以便在键盘打开时将固定位置更改为绝对位置：

// Apple.Device detects if it is an apple device
if (Modernizr.touch && Apple.Device) {
    /* cache dom references */ 
    var $body = jQuery('body'); 

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

CSS 代码：

.fixfixed #drawer {
    bottom: 0;
    margin-left: auto;
    margin-right: auto;
    position: absolute;
    left: 0;
    right: 0;
}

此修复适用于 iOS 7 上的 Safari，但不适用于 Chrome。此外，还有一个奇怪的行为：

如果页面上有输入标签，我在 iPad 上点击它，虚拟键盘就会打开，抽屉会跳起来。如果抽屉碰巧盖住了我点击的东西，那么点击事件实际上会在抽屉上触发。这是为什么呢？

我该如何解决这个问题？（我找了一阵子，但是如何在 iOS 上调试 Chrome 呢？）

非常感谢您的帮助！

更新

我使用下面的代码来检测是否是iOS 7上的Chrome，如果是，我在虚拟键盘启动时隐藏抽屉，并在虚拟键盘关闭时重新显示抽屉。

function iOSversion() {
    if (/iP(hone|od|ad)/.test(navigator.platform)) {
        // supports iOS 2.0 and later: <http://bit.ly/TJjs1V>
        var v = (navigator.appVersion).match(/OS (\d+)_(\d+)_?(\d+)?/);
        return [parseInt(v[1], 10), parseInt(v[2], 10), parseInt(v[3] || 0, 10)];
    }
}

var iosVersion = iOSversion();

if (navigator.userAgent.match('CriOS') && iosVersion[0] == '7') {
   $(document).hammer().on('tap', 'input, textarea', function(e) {
            $('body').addClass('chromefixfixed');
        })
            .on('blur', 'input, textarea', function(){
                body.removeClass('chromefixfixed');
            })
}

CSS 代码：

.chromefixfixed #drawer {
    display: none;
}

问题仍然存在：如何让 iOS 7 上的 Chrome 像 Android 上的 Chrome 一样工作（在键盘启动时不隐藏抽屉）？

感谢您的帮助！

【问题讨论】：

将position: absolute 更改为position: fixed
我之所以使用.fixfixed 类是因为position:fixed 在iOS 7 上的Chrome 和Safari 上存在上述相同的问题，当虚拟键盘打开时。使用.fixfixed 并更改为position:absolute 后（仅当键盘打开时），问题在Safari 中得到解决，但在Chrome 中仍然存在。

标签： ios css google-chrome css-position

【解决方案1】：

Position fixed bottom 和 position absolute bottom 在 iOS 和 android 设备上绝对是一场噩梦，根据我的经验，即使在最现代的设备上也无法让它始终如一地呈现，更不用说目前主导市场的旧设备了.如此之多，以至于作为开发人员，我会要求设计师因此而重新考虑布局。我相信这就是所谓的“回避”。

【讨论】：