最近在实际项目中遇到一个问题,记录一下。
这是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:这里还有一个小瑕疵,键盘弹回时,能看到底层的背景色,无所谓啦,先解决抖动吧。嘿嘿