android - Android 键盘消失后固定元素 (HTML) 中断了吗？

Question

我试图在视口(viewport)/屏幕底部放置一个文本输入。它工作正常，它甚至在 onfocus 事件后“粘”在键盘顶部。

但是，当键盘关闭时，更改后的位置(键盘顶部)和原始位置(视口(viewport)底部)之间存在滞后。

我的元素的 css 是:

.fixed {
    position: absolute;
    z-index: 1000;
    height: 50px;
    display: block;
    bottom: 0px;
    width: 100%;
 }

编辑:

此行为不仅仅依赖于固定/绝对定位。 position:relative 或 position:static 的输入也有同样的问题。似乎软键盘消失的速度比屏幕/浏览器 View 自身更新的速度快得多。似乎是内存问题或 Android 默认浏览器中的严重错误(现在杀了我)。

这里是一些截图。

专注于:

http://i.cubeupload.com/AQS7h8.png

关于模糊(注意蓝屏——这是内存问题吗？):

http://i.cubeupload.com/nV3kMh.png

Answer 1

Android 键盘破坏布局的类似情况，下面的代码应该适合你。

我们从顶部获取当前位置，设置顶部样式值，并重置底部值。

var fixed = document.querySelector(".fixed"),
    distanceFromTop = fixed.getBoundingClientRect().top;
fixed.style.top = distanceFromTop + 'px';
fixed.style.bottom = 'auto';