移动端调起软键盘致使 position：fixed 偏移

1. 问题描述

app内打开H5页面，页面包含input输入框，点击input调起软键盘，输入完成点击下方提交按钮弹出toast时，会出现t toast 跳动的现象，以下动图。

其中：
toast采用 position: fixed 进行固定定位

2. 分析缘由

关于 position: fixed

首先来看，MDN 中对 position: fixed 的说明：

不为元素预留空间，而是经过指定元素相对于屏幕视口（ viewport）的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。

注意到，position: fixed 是相对屏幕视口（viewport）的位置来定位的。 那么toast跳动是不是由于 viewport 的改变呢?

关于 viewport

MDN 中对 viewport 的说明：

@viewport 规则让咱们能够对文档的大小进行设置 viewport 。这个特性主要被用于移动设备。 按百分比计算尺寸的时候，就是参照的初始视口（viewport）。初始视口指的是任何用户代理和样式对它进行修改以前的视口。桌面浏览器若是不是全屏模式的话，通常是基于窗口大小。

在移动设备上（或者桌面浏览器的全屏模式），初始视口一般就是应用程序可使用的屏幕部分。它多是全屏或者减去由操做系统或者其它应用程序所占用的部分（例如状态栏）。

咱们注意到，viewport 是会随着操做系统或者应用程序占用而变化的，那是否是在调起软键盘的时候，改变了viewport 呢

验证猜测

js 提供了Window.innerHeight 方法，用来获取浏览器窗口的视口高度。
通过验证，在调起软键盘时，确实改变了viewport ，此时的视口高度是 咱们看到的可视屏幕高度-键盘高度, 因此咱们看到的toast跳动是由于 viewport的改变而致使。

3. 解决办法

经过绝对定位position: absolute 来替代 position: fixed

一般 toast 是直接插入到body元素下面的(固然能够是别的任何元素)，即 toast 是body元素的直接子元素，所以，能够设置toast 相对body元素进行绝对定位。

代码以下：

body {
    position: relative；
}
.toast {
   //  固定屏幕中间
    position: absolute；
    top: 50%; 
    left: 50%;
    transform: translate3d(-50%,-50%,0);
}

4. 注意事项

在使用经过绝对定位position: absolute 来替代 position: fixed的解决方案时，若是top、left 设置百分比，就须要注意设置绝对定位元素的 offsetParent 的 height 及 width 值。

由于，绝对定位是相对离它最近的position 属性值不为static的父元素（即 offsetParent ）来进行定位，而且top、left 设置百分比是以offsetParent 的height 和 width 来计算的。

好比上述动图中的例子，能够看到body的内容高度远远不到屏幕高度，所以想要实现 toast 在屏幕居中，就须要为 body元素设置合理的高度（经过设置 min-height 或者 height ）。

上述例子的完整代码：

html{
    height: 100%;  // 设置html为浏览器窗口高度（不设100%的话，html 高度就等于body的高度）
}
body {
    position: relative；
    min-height: 600px;  // 设置最小高度
}
.toast {
   //  固定屏幕中间
    position: absolute；
    top: 50%; 
    left: 50%;
    transform: translate3d(-50%,-50%,0);
}

offsetParent 概念补充

The HTMLElement.offsetParent read-only property returns a reference to the object which is the closest (nearest in the containment hierarchy) positioned containing element. If the element is non-positioned, the nearest td, th, table or the body is returned.

5. 总结

针对移动端调起软键盘致使 position：fixed 偏移的问题，能够经过绝对定位(position: absolute)替代固定定位( position：fixed)来曲线救国。 若是top、left 设置百分比，则同时注意设置绝对定位元素的 offsetParent 的height 和 width 值。