解决ios input失焦及滚动卡顿

1.input输入框聚焦问题

-webkit-user-select:auto; /*webkit浏览器*/
user-select:auto;
-o-user-select:auto;
-ms-user-select:auto;

2.滚动行为卡顿问题

overflow: auto;
-webkit-overflow-scrolling: touch;
overflow-y: scroll;

解析：

-webkit-overflow-scrolling: touch;，启用了硬件加速特性，所以滑动很流畅。可以解决ios5.0、android4.0以后系统的滑动卡顿问题。

-webkit-overflow-scrolling: auto | touch;

auto：普通滚动，当手指从触摸屏上移开，滚动立即停止

touch：滚动回弹效果，当手指从触摸屏上移开，内容会保持一段时间的滚动效果，继续滚动的速度和持续的时间和滚动手势的强烈程度成正比。同时也会创建一个新的堆栈上下文。

兼容写法
over-flow: auto; /* winphone8和android4+ */
-webkit-overflow-scrolling: touch; /* ios5+ */
ps：

1、如果添加了此属性但是不起作用，再添加overflow-y: scroll,就可以了。

2、当一个元素设置过position: absolute|relative，后再增加-webkit-overflow-scrolling: touch;属性后，会发现，滑动几次后就滚动区域会卡住，不能在滑动，这时给元素增加个z-index值就可以了。

webkit-overflow-scrolling: touch;
position:absolute;
z-index:1;

参考：https://blog.csdn.net/chiuwingyan/article/details/80424435 ，

解决ios input失焦及滚动卡顿相关推荐

bootsrtap h5 移动版页面在苹果手机ios滑动上下拉动滚动卡顿问题解决方法
bootsrtap h5 移动版页面在苹果手机ios滑动上下拉动滚动卡顿问题解决方法 bootsrtap框架做的h5页面,在android手机下没有卡顿问题,在苹果手机就一直存在这问题,开始毫无头绪 ...
解决微信小程序ios端滚动卡顿的问题
解决微信小程序ios端滚动卡顿的问题参考文章: (1)解决微信小程序ios端滚动卡顿的问题 (2)https://www.cnblogs.com/goloving/p/10563472.html 备 ...
css鼠标拖拉卡顿_详解overflow-scrolling解决滚动卡顿问题
前言如果你对某个div或模块使用了overflow: scroll属性,在iOS系统的手机上浏览时,则会出现明显的卡顿现象.但是在android系统的手机上则不会出现该问题. 解决方法以下代码可解 ...
vue 全局键盘_如何解决ios input框唤起软键盘不灵敏问题？
为什么移动端点击事件要加300ms延迟呢? 早在 2007 年初,苹果公司在发布首款 iPhone 前夕,遇到一个问题:当时的网站都是为大屏幕设备所设计的.于是苹果的工程师们做了一些约定,应对 iPh ...
win10系统文件拖拽卡顿_三大技巧教你解决Win10鼠标拖动窗口延迟卡顿问题
win10系统鼠标拖动窗口延迟卡顿怎么办?鼠标是我们在使用电脑的时候必不可少的设备,在win10系统中,有时候会使用鼠标来拖动窗口操作文件,然而有时候会遇到鼠标拖动窗口有延迟.卡顿的情况,这样操作就很 ...
微信小程序ios滑动问题（滑动卡顿，下拉拖动自定义导航栏）
微信小程序ios滑动问题(滑动卡顿,下拉拖动自定义导航栏) 1.ios中个别机型类似6s ,对微信自带的scroll-view无法滑动: 解决:在滑动内容区添加css属性,overflow: auto ...
解决无法安装cnpm，cnpm卡顿问题
解决无法安装cnpm,cnpm卡顿问题参考文章: (1)解决无法安装cnpm,cnpm卡顿问题 (2)https://www.cnblogs.com/lvyueyang/p/9253630.html ...
如何简单粗暴解决echars大数据量渲染卡顿问题
如何简单粗暴解决echars大数据量渲染卡顿问题直接通过yarn add echars安装echars最新版本,最新版本echars对底层点线渲染做了优化
终极方案——解决MacBook/Mac mini连接无线鼠标卡顿、漂移
终极方案--解决MacBook/Mac mini连接无线鼠标卡顿.漂移 Intel处理器机器/旧版Mac系统 Apple M系列新机器 Intel处理器机器/旧版Mac系统找到如图设置,修改网络首选 ...

解决ios input失焦及滚动卡顿

解决ios input失焦及滚动卡顿相关推荐

最新文章

热门文章