前端特殊错误，Bug汇总

一直在做移动端的网页，遇到的各种问题感觉丝毫不下于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 = "{{跳转的域名}}"
}

• safari 浏览器 getTime 为 NaN 的问题
  
  在苹果浏览器里，如果初始化的时间格式为这样 2018-02-04 00:00:00 ，则会失败
  需要把字符串中的 - 替换为 /，则会成功
  例如这样 2018/04/05 00:00:00
  

• 移动端浏览器左右滑动导致的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