前端兼容问题收集

ios 微信浏览器 不能播放音频

核心原理: 在微信的JS-API 中 play 一下 audio 即可达到自动播放的目的(应该是微信自己做了处理)

解决方法：在wx.ready()中播放音频

// 配置信息, 即使不正确也能使用 wx.ready
wx.config({});
wx.ready(function() {
    document.getElementById('bgmusic').play();
});

ios 微信浏览器 border-radius失效

父元素使用border-radius 和 overflow：hidden；子元素使用了transform属性，父元素的overflow：hidden；会失效。

解决方法：父元素添加属性如下

-webkit-backface-visibility: hidden;
-webkit-transform: translate3d(0, 0, 0);

ios 微信浏览器 input顶开窗口

解决方法：给input添加onblur事件

inputBlur() {
      let u = navigator.userAgent,
        isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
      if (isIOS) {
        //判断是 iOS
        setTimeout(() => {
          const scrollHeight =
            document.documentElement.scrollTop || document.body.scrollTop || 0;
          window.scrollTo(0, Math.max(scrollHeight - 1, 0)); // 归位
        }, 20);
      }
    }

ios 微信浏览器 animation-play-state 失效

解决方案

ios 微信浏览器 全屏视频关两次

解决方案：给video添加webkitendfullscreen（全屏退出）事件

参考链接