开发者社区> 安冉.> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

前端特殊错误,Bug汇总

简介: 一直在做移动端的网页,遇到的各种问题感觉丝毫不下于PC端的各种浏览器兼容,这里总结一下,也是对自己的一个知识梳理 JavaScript UC白屏问题 错误表现:网页在微信和QQ内置浏览器访问正常,但是UC和大部分的手机自带浏览器访问页面会出现白屏,打印调试后发现,JS代码一句都没有执行。
+关注继续查看

一直在做移动端的网页,遇到的各种问题感觉丝毫不下于PC端的各种浏览器兼容,这里总结一下,也是对自己的一个知识梳理

JavaScript

  • UC白屏问题

    错误表现:网页在微信和QQ内置浏览器访问正常,但是UC和大部分的手机自带浏览器访问页面会出现白屏,打印调试后发现,JS代码一句都没有执行。

    解决:这种问题是因为使用了浏览器不支持的语法导致的,第一种是ES6没有转换为ES5。但是很多人使用了Babel转义后依然会出现这种情况,这就是第二种错误:使用了浏览器不支持的Api。某些函数方法是不会被Babel转义的,但是浏览器依然不支持。例如Object.freeze()冻结函数,使用了这个方法后即使进行Babel转义,UC和自带浏览器中也会出现白屏。

// 特意去babel官网去测试了一下,只是比原代码多加了一个 'use strict'

Object.freeze({ a: 0 })

// =>

"use strict";

Object.freeze({ a: 0 });

这样的 Api 应该有很多,如果项目中出现了这个错误,不知道错误具体出现在哪儿,那就只能用二分法慢慢排除了。

  • 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

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
帮前端朋友解决下电网手持仪app bug
帮前端朋友解决下电网手持仪app bug
0 0
不愧是前端老油条,分分钟看出我方案的bug
国庆前刚开发完一个小需求,常规性的做了一次code review,不过这次review有所不同,我们组前端老油条竟然参会了,平时发会邀都不来的。 不过不愧是老油条,竟然分分中发现了问题,老油条的地位又在我们小前端的心里巩固了一下。 和往常一样,review前先过一遍技术方案,一让大家快速的了解需求,二来分析下技术方案是否存在问题,是否合理,一般情况下,技术方案没问题,后面的代码review感觉就没啥必要了,因为很少有人听。
0 0
正则表达式--QQ微信、优酷前端 邮箱正则表达式验证 Bug
但凡稍微有点资历的程序员,都免不了要写正则表达验证算法。最近见到好几个正则表达式的Bug,抽空写出来 拿邮箱验证来说,网上绝大部分人写的邮箱验证正则表达式代码都不能验证这邮箱
0 0
软件测试面试题:如何分析一个bug是前端还是后端的?
软件测试面试题:如何分析一个bug是前端还是后端的?
0 0
前端工作总结113-点击按钮报错--bug修复--直接写接口里面
前端工作总结113-点击按钮报错--bug修复--直接写接口里面
0 0
【BUG日记】【VUE】【JAVA】后端已经添加上@CrossOrigin,前端还是显示Access to XMLHttpRequest...
【BUG日记】【VUE】【JAVA】后端已经添加上@CrossOrigin,前端还是显示Access to XMLHttpRequest...a
0 0
前端BUG录- 科学记数法是什么?
科学记数法是一种记数的方法。 特性:精度丢失、节省空间
0 0
前端BUG录- 因lodashjs debounce去抖优化造成的 bug
做开发其实还是要考虑一下边界问题,因为边界问题有时候会导致体验断崖式的下跌。 正好前段时间遇到了个问题,今天分享一下。之前做了一个 IM 的项目,是会话列表出现的问题:进入页面时,会加载会话列表,加载数据会造成卡顿。
0 0
前端BUG录- audio 意外的 Pending 挂起状态
最近公司一直在做众审平台相关的功能,大多数还都和音视频有关,前端终究还是逃不过这一劫。 疯狂遇到 BUG, 今天来说说其中一个:audio 加载时意外的长时间 Pending 问题。
0 0
前端BUG录- input 数字检验异常问题
前两天才分享了 input 的属性、特征。昨天就有个小伙伴踩雷了。所以素材又有了 小伙伴做的是实名认证(移动端)相关的功能,然后有个位置校验了只能输入数字。 小伙伴发出了灵魂质疑:为什么 1. 没事 1.. 就被清空了? 这个问题告诉我们喝一点没事,“一點點”不行。
0 0
+关注
文章
问答
文章排行榜
最热
最新
相关电子书
更多
万物互联语音交互从端开始——前端处理从技术到商业
立即下载
2022 前端技术趋势解读
立即下载
智能前端技术与实践
立即下载