bug 移动端

ios

ios10 canvas 生成图片失败

base64不应设置跨域

if (arr[i].url.indexOf('data:image/png;') === -1) {
  img.setAttribute('crossOrigin', 'anonymous');
}

ios11 及以下页面白屏

问题：开发代码时使用 es6 语法如 ... 延展操作符，打包后在低系统上不兼容。

解决：使用 babel 转译 es6 语法。

ios15 及以上微信二次分享失败

问题：ios15、16系统，微信二次分享报错，报错信息 {realAuthUrl: ["https://abc"], "errMsg": "config: invalid signnature"}。

原因：微信内鉴权服务获取 referrer 作为请求源，ios15 开始安全机制升级，referrer 默认只携带域名而不是完整路径，导致微信鉴权失败，故微信二次分享失败。

临时解决：h5 的 meta 标签设置允许跨域传递完整链接 <meta name="referrer" content="unsafe-url">

最终解决：借助服务在鉴权时传递完整 url。

rotate(180deg) 后在其他元素下方

/* 1、给父元素添加 */
.father {
  overflow:hidden;
}
/* 给元素z轴移动部分距离 */
.ele {
  -webkit-transform: translate3d(0,0,10);
  transform: translate3d(0,0,10);
}

overflow:hidden 属性失效

问题：低系统如ios10，父元素存在定位、border-radius、overflow:hidden属性时，子元素存在 transform 属性，此时父元素的overflow:hidden会失效，子元素展示空白。

解决：父元素添加 -webkit-backface-visibility:hidden; 和 -webkit-transform: translate3d(0, 0, 0); 属性。

弹层内容滑动时 body 跟着滑动

data() {
  return {
    top: window.scrollY,
  }
}

// 弹窗显示时 
document.body.style.position = 'fixed';
document.body.style.top = `${-this.top}px`;

// 弹窗关闭时
beforeDestroy() {
  document.body.style.position = '';
  document.body.style.top = '';
  window.scrollTo(0, this.top); // 回到原先的top
}

时间格式不支持

问题：ios端不支持 2019-1-1 格式

解决：可替换成 2019/1/1 格式，iOS 和 Android 双端都支持

time = time.replace(/-/g, '/');

页面闪烁

background-visibility: hidden;

android

手机端 ¥ 展示异常

全角元：￥
半角元：¥
在华为mate9 pro、小米5等手机上，全角元只显示一横，而半角元都是两横，所以在开发中使用半角元可避免展示异常问题。

双端问题

dom 添加移除类名动画异常

window.requestAnimationFrame() 告诉浏览器希望执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。 该方法需要传一个回调函数作为参数，该回调函数在浏览器下一次重绘之前执行。 若想在浏览器下次重绘之前继续更新下一帧动画，那么回调函数自身必须再次调用。

// 解决使用dom添加类名的动画异常问题（如动画不暂停，不回到开始位置、不能多次执行动画等）
addAnimateClass(dom, className) {
  window.requestAnimationFrame(() => {
    window.requestAnimationFrame(() => {
      dom.classList.add(className);
    });
  });
},
// 调用该方法添加有动画类名
this.addAnimateClass(this.$refs.animateDom, 'animate-class');

url-searchParams 兼容性问题

使用 url-search-params-polyfill 插件替换。

长按松手后不触发 touchend 事件

touchstart：当手指触摸屏幕时触发；

touchmove：当手指在屏幕上滑动时连续地触发；

touchend：当手指从屏幕上移开时触发；

touchcancel：当系统停止跟踪触摸时触发。可解决部分安卓手机不触发 touchend 的问题。

<div
  class="button"
  @touchstart="touchstartHandle"
  @touchend="touchendHandle"
  @touchcancel="touchendHandle"
></div>

部分机型有缝隙问题

// 问题机型：iPhone6
.progress {
  width: 7.5rem;
  height: 0.4rem;
  background: #f7d4c3;
  border: 2px solid #2e0708;
  .progress-bar {
    height: 100%;
    width: 0%;
    background: #2e0708;
    box-shadow: 0 0 0 1px #2e0708; // 添加1px的shadow以规避此问题
  }
}

开发问题

window.removeEventListener 不生效

原因：如果是用 function 声明，并且函数体中访问了 this，需要用 .bind(this) 方法绑定到 this，绑定之后返回的函数和原先的函数并不是同一个函数。

解决：用一个新变量接收返回的函数作为参数 listener。