1、背景
需求背景 ：
开发了一个类似问卷星的问卷系统并重构的项目，刚开始开发的为 PC 端，其中最头疼的一点无非就是 IE 浏览器的兼容适配性问题；
再之后项目经理要求同步进行开发 移动端 ，简单的说就是写 H5 页面，到时候会内嵌在 App 应用、办公系统 或 小程序 里，刚开始都是在 Edge 浏览器 模拟器 里面进行的开发测试，因为自己也是头一次开发移动端的项目，所以没啥经验（ 后来知道了就是要尽量避免使用 fixed 定位，因为 IOS 会有兼容性问题），但是没办法，项目内已经有好多地方都使用了 fixed 的 固定定位，因此也就导致了，项目开发完使用 Jenkins 打包部署上线后，在 IOS 系统的苹果真机上面测试时，就遇到了各式各样的奇葩问题。。
首当其冲，也是最大的问题就是 ：
1、当 input 输入框聚焦调用起 软键盘 输入完内容之后，也就是软键盘收起来后，整个页面布局排版样式啥的都乱了，而且当你想再次选中输入框时，发现选不中了，其实是此时整个页面都已经掉下来一块了，再想选中聚焦的话，就要往上面点击一下才行。。
2、解决过程
然后反正就是各种百度，各种请教大佬 ：
JSBridge ： 支付宝H5开放文档
百度的方案 ：
解决 H5 IOS input 聚焦时，页面整个被推上去了，键盘收起页面未下移 BUG
IOS下软键盘收起的时候，页面被顶上去，无法复原的终极解决方案
uniapp 开发项目 ：
UniApp中input组件在IOS设备上弹出软键盘时页面整体上移问题的解决方案，以及input组件聚焦后弹出软键盘固定在软键盘上方，失去聚焦后回到原始位置。_ios弹出键盘界面上移
上面千奇百怪的方式都尝试过了，最后还是没啥卵用 ：
3、解决方案
最终在请教了公司内的大佬之后，就基本 OK 啦 ～
-webkit-backface-visibility_笔记大全_设计学院
结合 ➕ ： -webkit-transform: translate3d(0,0,0)
在 App.vue 内全局配置了一下完事 ！
（ 当然这里最好判断一下是否为 IOS 系统再添加属性，因为可能会影响到安卓系统的哟～ ）
4、最终代码
<script>
export default {
mounted() {
// 判断是否为IOS系统以添加CSS属性
let u = navigator.userAgent;
let isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); // ios终端
if (isIOS) {
let iosApp = document.getElementById('app');
iosApp.style.backfaceVisibility = 'hidden';
iosApp.style.transform = 'translate3d(0,0,0)';
}
},
};
</script>Perfect ！ ！下课 ～