前端特殊错误,Bug汇总
来源:互联网 发布:linux php环境 编辑:程序博客网 时间:2024/05/22 15:16
一直在做移动端的网页,遇到的各种问题感觉丝毫不下于PC端的各种浏览器兼容,这里总结一下,也是对自己的一个知识梳理
JavaScript
UC白屏问题
错误表现:网页在微信和QQ内置浏览器访问正常,但是UC和大部分的手机自带浏览器访问页面会出现白屏,打印调试后发现,JS代码一句都没有执行。
解决:这种问题是因为使用了浏览器不支持的语法导致的,第一种是ES6没有转换为ES5。但是很多人使用了Babel转义后依然会出现这种情况,这就是第二种错误:使用了浏览器不支持的Api。某些函数方法是不会被Babel转义的,但是浏览器依然不支持。例如Object.freeze()冻结函数,使用了这个方法后即使进行Babel转义,UC和自带浏览器中也会出现白屏。其他的一些情况,如果项目中出现了这个错误,不知道错误具体出现在哪儿,那就只能用二分法慢慢排除了。
UC浏览器返回上一页不刷新页面
表现:这个属于浏览器的特殊行为了,特点是UC浏览器返回上一页时不会更新页面。
解决:
// 第一种方法,强制刷新页面,当从pageB返回到pageA时,刷新页面//(pageA => pageB => pageA => upDated)$(window).on('pageshow', function (evt) { setTimeout(function () { if (evt.persisted) { location.reload(true) } }, 10)})
// 第二种方法,在跳转到新的页面前把页面回归到想要的状态//(pageA => upDated=> pageB)// 在pageA 跳转到pageB前执行btn.onclick = function() { setTimeout(function() { upDated() // 更新待会返回时想要的页面的状态 }, 0) location.href = "{{跳转的域名}}"}
移动端浏览器左右滑动导致的BUG
表现:现在的手机浏览器很多都自带左右滑动前进后退的,但是如果你有一个轮播图或其他一些触发touch事件的元素,有时就会和浏览器自带的行为有冲突。
解决: 在touchstart中加入e.preventDefault()可以阻止浏览器的自带行为。然后会发现click事件无法触发了,在移动端,浏览器认为执行了touchstart和touchend才算一次完整的点击,但是由于在touchstart中加入了e.preventDefault()导致点击事件不能触发,这时如果要出发click事件可以把e.preventDefault()放入touchmove事件中。就可以完美执行了。
但是在UC浏览器下,使用了e.preventDefault()后有时还会触发UC自带的行为,需要注意。。。再附一篇相关博文
移动端touch事件影响click事件以及在touchmove添加preventDefault导致页面无法滚动的解决方法
CSS
IOS点击不触发事件回调函数
错误表现:在IOS中,点击非a标签的元素无法触发点击事件。
解决:这种情况出现在动态添加的Dom节点上,即使使用了事件代理,或者在Dom被添加后进行绑定都不会触发元素绑定的JS事件。解决方法是给Dom元素添加样式 cursor: pointer; 这样就可以正确触发事件了。
IOS下为元素添加overflow样式滑动变卡
错误表现:在IOS中,元素添加了overflow样式后,滑动惯性会被取消,导致滑动不顺畅。
解决:可以给元素添加-webkit-overflow-scrolling: touch;样式,解决一切滑动不顺畅问题,但是IOS下使用-webkit-overflow-scrolling: touch;会导致另外的Bug,position定位的元素如果和设置了overflow的元素是兄弟关系或父子关系,会导致定位元素也会随着一起滚动,需要注意。
系统版本过低导致flex布局失效
错误表现:移动设备的系统版本过低时,flex布局失效
解决:设置display: flex;样式的子元素,必须是块级元素,否则失效(必须设置display: block;)。还有一点要注意,flex-wrap低版本的系统是完全不支持的,可以用display: inline-block;替代。
原文链接:http://blog.csdn.net/qq_25243451/article/details/78811776
- 前端特殊错误,Bug汇总
- 前端bug汇总
- Android开发中BUG、错误汇总(不断更新)
- Android开发中BUG、错误汇总(不断更新)
- bug汇总
- BUG汇总
- (Bug汇总)
- 前端css特殊属性
- [shell]特殊变量汇总
- shell特殊字符汇总
- 前端之bug收集
- 前端错误
- VC2005 Bug汇总
- ie bug 兼容性汇总
- opencv BUG汇总
- .Net平台Bug汇总
- IE6 BUG汇总
- android常见bug汇总
- maven 运行后提示数组越界问题解决。
- Bootstrap(三十六)
- Expert Apache Cassandra Administration.pdf 2017 英文原版 免费下载
- MAC上使用androidstudio如何关联源码
- 如何搭建高可用架构(五)--LVS+Nginx配置实现
- 前端特殊错误,Bug汇总
- python学习一--基础知识
- Bootstrap(三十七)
- JVM调优的liunx命令
- iOS小技巧
- KMP算法
- pip、lxml、requests安装
- JAVA代码优化
- Reinforcement Learning.pdf 2017 英文原版 免费下载