关于IOS下的video标签层级问题

Posted 2023-03-01

参考技术A 用了百度的cyberplayer，播放的时候，使用的是他自己生成的video

单独使用能正常使用，但是跟antd mobile的Carousel结合的时候
走马灯+视频，会有个bug，这个bug只在iphone的safari上出现，在macbook的safari和chorme上都没有出现。
bug是视频播放器的control条出不来了，这个control条是cyberplayer的，不是原生的，不管怎么点都出不来

后来突发奇想改了height 80%,发现问题是因为video的层级太高了，把control条挡住了，可是加了z-index，设置了定位，也没用，我还以为是iphone上safari播放video标签，自动采用原生的播放，导致层级比任何元素都高，但是稍微调试了一下发现，给video设置了zindex:-1，就能看见control条，并且视频消失，这样子就不符合猜想了，如果是原生的video，那不可能被zindex：-1给干掉，

发现当这个播放器在其他页面单独使用的时候是正常的，然后搜了一下对应的github的issues，都没类似的问题，很奇怪，如果这个bug存在的话，那一定是常见的，肯定是会有人提出过的，

于是猜想，这个不是bug，这是样式问题导致的，后来看到一篇文章
https://juejin.im/post/5cb6d36c6fb9a06880144666

先不管position是不是fixed，走马灯就是有定位，并且它的transform改变引起滑动，非常有可能是这个原因，所以试了一下，把control条加了transform:translateZ(100px)

这里要说明的是，video标签，和control条，都被我加了定位，这样子zindex才会有效

惊呆了，transform:translateZ(100px) 居然能作用在zindex上