解决ios手机页面overflow scroll滑动很卡的问题

今天在IOS系统上测试 webAPP
App的时候发现使用了position:fixed/absolute时，DIV容器里面下滑动没有像普通页面一样顺畅，手滑到哪就停到哪。感觉很卡一样，而安卓效果正常，算是一个bug。终于在网上找到了一个解决方法。

-webkit-overflow-scrolling:touch;

加上去后果然有用，也就是说DIV容器使用的定位属性引起的。当时效果是弹出一个层，body无滚动条，但是弹出层需要可以上下滑动。如果你也碰到了这个问题希望可以用这一句css代码帮到你！

很神奇！！！

时间： 2024-10-11 09:29:14

解决ios手机页面overflow scroll滑动很卡的问题的相关文章

android 布局使用 viewPager 时，如何解决和子页面长按滑动冲突问题

使用 viewPager 时,如何解决和子页面长按滑动冲突问题. 我的问题原型: 这个问题,我相信遇到的人会比较少,我是在一个 viewPager 中,其中一个 fragment 中实现了长按滑动图片的功能,而发现它们两者的 onTouchEvent事件冲突. 尝试过的解决方法: 1----- 遇到这问题,首先是百度,百度到的方法有,自定义 viewPager,在里面重写 onTouchEvent 和 onInterceptTouchEvent,具体代码是下面,这种方法,我尝

解决ios双击页面上移问题

做webapp时,ios有个默认双击事件,会缩放页面,并将当前点击的位置居中到屏幕,本来也没什么,但是当页面中有fixed定位的元素时,这时候你就会神奇的发现,fixed元素所见不所得了! 还有就是页面会上移... //解决ios双击页面上移问题 //在项目中测试不紧input/button这些表单控件有这个问题,p,div等也有问题,于是乎就直接在body开刀了 (function() { var agent = navigator.userAgent.toLowerCase(); //检测是

ios系统竖屏拍照 canvas处理后图片旋转（利用exif.js解决ios手机上传竖拍照片旋转90度问题）

转:https://www.cnblogs.com/lovelgx/articles/8656615.html ---恢复内容开始--- 问题:html5+canvas进行移动端手机照片上传时,发现ios手机上传竖拍照片会逆时针旋转90度,横拍照片无此问题:Android手机没这个问题. 解决方法:利用exif.js解决ios手机上传竖拍照片旋转90度问题因此解决这个问题的思路是:获取到照片拍摄的方向角,对非横拍的ios照片进行角度旋转修正. 利用exif.js读取照片的拍摄信息,详见 htt

解决使用了属性overflow:scroll、overflow-y:scroll、overflow-x:scroll;的网页在iPhone iOS Safari浏览器中滑动不流畅问题

在使用了属性overflow:scroll.overflow-y:scroll.overflow-x:scroll;的元素上加上-webkit-overflow-scrolling: touch;即可参考资料: 解决页面使用overflow: scroll在iOS上滑动卡顿的问题网页在Safari快速滚动和回弹的原理: -webkit-overflow-scrolling : touch;的实现 -webkit-overflow-scrolling 带来的 BUG

解决ios手机上传竖拍照片旋转90度的问题

html5+canvas进行移动端手机照片上传时,发现ios手机上传竖拍照片会逆时针旋转90度,横拍照片无此问题:Android手机没这个问题. 因此解决这个问题的思路是:获取到照片拍摄的方向角,对非横拍的ios照片进行角度旋转修正. 这里主要利用exif.js读取照片的拍摄信息. Exif.js 提供了 JavaScript 读取图像的原始数据的功能扩展,例如:拍照方向.相机设备型号.拍摄时间.ISO 感光度.GPS 地理位置等数据. EXIF 数据主要来自拍摄的照片,多用于移动端开发,PC

终于解决ios上页面滑动拉屏的问题

看了网上很多资料,说是-webkit-overflow-scrolling: touch;这个属性引起的问题.可是这个如果没有加的话,ios上面滑动又会卡顿. 所以最后还是用了这个,一开始没有找到好的办法解决这个问题.然后想借鉴淘宝的,可是好像又看不到什么东西.所以就自己的各种尝试. 终于........把他给解决了. 因为项目是用vue写的,所以这个滑动的属性一直是加在一个公共的类上面的. 然后昨天尝试的时候,把这个东西放在body上面,结果神奇的发现,居然可以了 body, html { h

ios应用内嵌h5页面数据自动变色识别为手机号码的解决方法——手机号码拨号禁用IOS手机页面数字自动识别为手机号

现象如下,ios应用内嵌h5页面,本来是设置了白色的数字,两三秒之后会自动变为黑色,然后点击的时候就会弹出是否拨号的提示: 解决方法,添加如下meta标签,即可解决: <meta name="format-detection" content="telephone=no">

解决ios微信页面回退不刷新的问题

在回退后需要刷新的页面加以下js 1 $(function () { var isPageHide = false; window.addEventListener('pageshow', function () { if (isPageHide) { window.location.reload(); } }); window.addEventListener('pagehide', function () { isPageHide = true; }); })

为什么1G内存iOS已经足够而安卓却很卡？

昨天红米2代手机正式发布,针对网络上很多质疑红米2代只有1GB运行内存的声音,小米高管孙鹏用iPhone6来做类比,称红米2代用1GB运行内存也可以很流畅.那么事实真的如此吗? 要保持安卓手机流畅,少装App确实有用,不过iPhone 6是否流畅和少装App却没有半个F码的关系. iOS 8让人们第一次发现原来苹果也会卡顿,而与之相比,Android卡成Shit却早已名声在外. Google在推出4.4时发明了ART (Android runtime)来解决卡慢, 5.0时又用ART彻底取代Da