[BUG]微信浏览器 iOS input 失焦页面不回弹
描述
IOS13.
IOS设备中,input唤醒软键盘后,body整体会向上滚动,如果input框输入完成确定后,如果页面在最底部则不回弹,导致fixed布局实际效果上移,fixed布局内按钮点不到。
如图

解决方案
input onblur 让body滚动,页面回弹
function inputBlur() {
if (/iphone|ipad|ipod/.test(navigator.userAgent.toLowerCase())) {
let speed = 1;
setTimeout(function () {
var currentPosition = document.documentElement.scrollTop || document.body.scrollTop;
currentPosition -= speed;
window.scrollTo(0, currentPosition); // 页面向上滚动
currentPosition += speed;
window.scrollTo(0, currentPosition); // 页面向下滚动
});
}
}
[BUG]微信浏览器 iOS input 失焦页面不回弹的更多相关文章
- fastclick使用与 fastclick ios11.3相关bug原因(ios输入框点击变得不灵敏,ios input失焦后,页面上移,点击不了)
FastClick 移动设备上的浏览器默认会在用户点击屏幕大约延迟300毫秒后才会触发点击事件,这是为了检查用户是否在做双击.为了能够立即响应用户的点击事件,就有了FastClick. 安装fastc ...
- 解决微信浏览器无法使用reload()刷新页面
场景是这样子的,页面在初始化时有一个ajax请求,在页面上有一个按钮,点击的时候执行window.location.reload(),正常情况reload()后页面依然会向后台发出请求,但在安卓的微信 ...
- js网页判断移动终端浏览器版本信息是安卓还是苹果ios,判断在微信浏览器跳转不同页面,生成二维码
一个二维码,扫描进入网页,自动识别下载苹果和安卓客户端,判断网页如下,(只有苹果的微信不能自动跳转)所以加个微信判断. <!DOCTYPE html> <html> <h ...
- 解决苹果手机(IOS)input失焦后,页面不恢复的问题
var winHeight = $(window).height(); var u = navigator.userAgent, app = navigator.appVersionvar isIOS ...
- 改进:js修改iOS微信浏览器的title
问题简介 前端入门没多久,可能连入门也不算,最近网上流行各自书籍改名,什么<前端开发,从入门到放弃>,<Android开发,从入门到改行>之类的,程序员真是个爱自嘲的群体,但我 ...
- JS动态修改微信浏览器中的title
JS动态修改微信浏览器中的title我们的原理是设置一个ifame然后我们再加载一下就可以实现了,具体的例子如下所示. 平时使用JS修改title,直接document.title=新标题就好了 这样 ...
- 解决H5在微信浏览器或QQ浏览器修改title的问题
传送门:http://blog.csdn.net/code_for_free/article/details/51195468 如果是Android,使用 document.title = ‘1231 ...
- vue-router 在微信浏览器中操作history URl未改变的解决方案
在PC端和手机浏览器中router.replace() or router.push()能够正常使用,页面的地址和页面都正常显示:但是在微信中,从/a页面通过router.push('/b')跳转到/ ...
- C#判断用户是否使用微信浏览器,并据此来显示真实内容或二维码
平时我们看一些网页的时候会发现这样的功能:有的页面只能在微信里访问,如果在电脑上访问就只显示当前地址的二维码.这个用C#怎么实现呢?我们结合代码来看看. 首先,我们需要先判断用户使用的是什么浏览器,这 ...
随机推荐
- eclipse批量替换,修改变量名或单词(两种方法)
第一种(常用): ①如图:双击选中变量名id,右键选择Refactor中的Rename ②之后如下图所示,红箭头的带有方框的就是选中修改的变量名,此时修改提示框的内容,后面带方框的也跟着修改, 而蓝色 ...
- Linux下MongoDB的部署
一.MongoDB的下载解压 MongoDB在linux是免编译安装的,直接解压就可以用. # 解压 tar -zxvf mongodb-linux-x86_64-3.0.6.tgz # 将解压包拷贝 ...
- java生成饼图
pom.xml文件导入依赖包 <!-- https://mvnrepository.com/artifact/org.jfree/jfreechart --> <dependency ...
- 接口测试-chap5-使用正则表达式提取响应数据
1.导入相关库 import re 2.re.findall(r"前(.+?)后", 匹配源) 3.前:表示要匹配的文本左边的内容 4.后:表示要匹配的文本右边的内容 5.它的返回 ...
- 基于OpenDDS应用程序开发(3)订阅端实现
连续的三篇博文演示如何基于OpenDDS开发应用程序,将数据从发布端节点发送到订阅端节点,该示例程序由一个发布者发布数据,一个订阅者订阅数据,使用默认的QoS策略和TCP/IP传输方式. 本文是第三篇 ...
- Uber刷单,刷出中国的人性劣根?
美国叫车应用Uber国际化之路一直挺顺利的,融资也挺顺利的,他们现在很有钱,最新总融资金额达到100亿美元,创下美国非上市高科技公司的融资纪录.全新的商业模式,以及优质的客户体验,让Uber ...
- Python-控制语句及函数
if-elif-else for while 函数 函数定义 空函数 pass 返回多个值 可变参数 * 关键字参数 ** 控制语句 if - elif - else 比如,输入用户年龄,根据年龄打印 ...
- Lambda表达式和函数试接口的最佳实践 · LiangYongrui's Studio
1.概述 本文主要深入研究java 8中的函数式接口和Lambda表达式,并介绍最佳实践. 2.使用标准的函数式接口 包java.util.function中的函数是接口已经可以满足大部分的java开 ...
- CSS——NO.6(盒模型)
*/ * Copyright (c) 2016,烟台大学计算机与控制工程学院 * All rights reserved. * 文件名:text.cpp * 作者:常轩 * 微信公众号:Worldhe ...
- 小程序中,设置Sticky定位,距离上面会有一个缝隙
近日,在小程序中使用sticky定位实现吸顶效果,不料入了一个大坑. 定位后,距离有position: relative:的上级元素有个1px大小的缝隙条,透过缝隙,滑动时可看到定位标题下的内容. 此 ...