大事记 - 安卓微信浏览器 video 标签层级过高

// 为什么叫《大事记》？

// 以前总有面试官问这样一个问题：“你在项目中遇到过最头疼的问题是什么，是怎么解决的？”

// 当时总觉得，已解决的问题都算不上头疼，所以回答总是不尽人意。

// 最近遇到微信端的这个问题，非常让人头疼，正好有小伙伴和我聊到面试经验，灵机一动，《大事记》由此而生

 

问题描述：

在安卓系统的微信浏览器里面，

 

 

分析原因：

微信的 X5 内核为了统一

这样的改造在 IOS 系统上一切正常，但在安卓系统就会有各种问题，比如这里的层级太高

 

 

解决方案：

当测试的同事将这个 bug 提给我的时候，我根本没想到，我即将面对一场苦不堪言的角斗

 

第一回合：隐藏 video

最初暴露的问题并不是页面底部的按钮，而是一个弹窗

在了解了问题的原因之后，我当时的思路是：

打开弹窗的时候，将

隐藏标签的方法有很多：display:none;   visibility: hidden;  z-index: -1;   left: -9999px;  opacity: 0;

但 display:none 没有占位，visibility 和 z-index 不起作用，opacity 虽然不显示元素，但依旧点不到下面的元素

所以只有用定位的办法了

  let tag = document.createElement('style')
  tag.id = id
  tag.innerHTML = `video { position: relative; left: -9999; }`
  body.appendChild(tag)

在打开弹窗的时候，通过上面的代码添加一个带有特殊 id 的