Vue框架下 iOS微信端键盘收起 导致页面卡死 点击按钮错乱的问题

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/Redcricket/article/details/88305358

项目背景:

  项目使用vue框架开发, 同时支持APP(Cordova混合模式) 内嵌至第三方APP 以及公众号环境

问题描述:

  由于项目对接了第三方客服聊天功能(web端), 最近发现聊天时输入内容收起键盘后导致发送按钮无法点击的问题,关闭也不太好使 好像整个页面卡死了一样,按钮的点击功能错乱,原以为是第三方客服的问题,尝试其他有输入的地方,原来整个项目都有这个问题, 且只有iOS微信公众号端有这个问题, 原以为是由于-webkit-overflow-scrolling:touch导致的(具体可参考:深入研究-webkit-overflow-scrolling:touch及ios滚动), 尝试去除这个属性仍然没有作用, 使用简单页面测试, 发现是body使用了position: fixed的原因,但是去除会导致页面无法回弹. 解决方法参考:

移动端web页面使用position:fixed问题总结

不受控制的 position:fixed

微信6.7.4 ios12软键盘顶起页面后隐藏不回弹解决方案(曲线救国 不推荐 可做中转方案)