apicloud 移动端 input输入框重焦脱焦定位抖动问题

最近在实际项目中遇到一个问题，记录一下。

这是css代码

.account_binding_active {
    position: fixed;
    bottom: 0px;
    left: 0px;
    float: left;
    width: 100vw;
    height: 85vh;
    background: #f9fafc;
    border-radius: 30px 30px 0px 0px;
    transition: 0.3s;
    z-index: 6;
}

这是实际复现gif：

找了很久的答案，发现这个低级的问题，在大家的项目中都没出现过，可能是我太菜了吧。根据实际测试，我把CSS修改如下：

.account_binding_active {
    position: fixed;
    top: 100px;
    left: 0px;
    float: left;
    width: 100vw;
    height: calc(100vh - 100px);
    background: #f9fafc;
    border-radius: 30px 30px 0px 0px;
    transition: 0.3s;
    z-index: 6;
}

两段代码实际上，我只是将 bottom 更改成了 top ，然后这个问题就解决了。实际效果演示：

个人总结：

使用 bottom 为基准的时候，input 重焦时，键盘窗口弹出，窗口的尺寸发生了改变，会有一个弹动计算窗口尺寸的过程，然后视觉上呈现就是窗口抖动，使用 top 然后计算好尺寸，就可以解决这个问题

tips：这里还有一个小瑕疵，键盘弹回时，能看到底层的背景色，无所谓啦，先解决抖动吧。嘿嘿