- 当前 Bug 的表现(可附上截图)
微信打开网页;
微信IOS 6.7.4 键盘弹起页面上滑,键盘收起页面不会回到原位置,导致弹框(css设置position为fixed会有问题,absolute不会有问题)后按钮响应区域错位。
(如图:键盘收起,页面没有回到原来的位置)
- 预期表现
点击区域正常响应
- 复现路径
1、打开网页:https://img.zai-art.com/web/app/demo/weixin.html
2、输入框光标聚焦,键盘弹出
3、收起键盘,点击 “弹框” 按钮
4、点击弹框中的 “点我” 按钮 (正常响应弹框会消失)
- 提供一个最简复现 Demo
源代码
https://haodaking.github.io/demos/wechat/weixin.html
预览
https://img.zai-art.com/web/app/demo/weixin.html
1. 这是Apple在iOS的bug
2. 会出现在所有的Xcode10打包的iOS12的设备上 3,可建议参考下这位同学的方法
我现在这个input框所在的页面在一个iframe页面中的,好像无法触发父级页面的window.scroll。。。还有其他方法吗
这个问题解决了吗?跪求帮助
在点击按钮那里加下面其中一个即可解决
可以用
可以用是可以用,但是我全线产品 好多浮动 input 怎么搞 那么多地方有 wx我是服了
可以用
网上找了一堆的例子,最后还是这个符合我的需求,window.scrollTo(0, 0);亲测可用
我现在碰到的问题是: 软键盘弹起以后,页面向上滑动,点击按钮,按钮不触发,这种要怎么解决
我也发现 微信IOS 6.7.4版本 搭配 IOS12版本 会有这个问题,需要滑动一下页面才能回到原来的位置
确实是这样的 我把我们部门所有的IPHONE都测了一遍 发现只有IOS12并且微信版本6.7.4会这样
不会,我这有一个ios12,7.0.3的也有这个问题
是的 我当时发言的时候是6.7.4 但是没想到 现在这个版本 微信依然没有修复这个问题。
我的解决方案:
//解决IOS12并且微信版本6.7.4页面,键盘弹出bug
if(_.isIOS()){
window.addEventListener('focusout', function () {
//软键盘收起的事件处理
setTimeout(()=>{
window.scrollTo(0 ,document.documentElement.scrollTop || document.body.scrollTop);
})
});
}
这个锅其实是苹果官方的,同样的网页在iOS的QQ里面也有同样的问题,只是苹果官方还是没解决,浏览器就不会出现这个问题。
解决代码:
//滚动到顶部
window.scrollTo(0, 0);
//滚动到底部
window.scrollTo(0, document.documentElement.clientHeight);
现在我的页面是有input输入框和选择表情的功能,,input倒是可以搞定,但选择表情时,使用blur将键盘弹回,这时再使用scrollTop=0,会有一个很明显的弹回的操作,体验很差啊
这个问题你解决了吗
http://www.cnblogs.com/Miracle-ZLZ/p/10030608.html
我加上去一点用也没有啊 android都出现了
亲测可用,只能如此了,基本一个页面不会有太多的输入数据
好烦啊 现在全线都是这样 赶紧解决呀