Safari 15.0页面加载时设置position fixed的video元素不生效问题问询

这是Safari 15.0版本自带的渲染兼容bug，你的代码写法没有问题。

这个bug是Safari 15.0公开发布时就存在的已知图层渲染缺陷，触发条件为：页面初始加载阶段，video元素就被设置position: fixed/position: absolute且z-index为负值，此时Safari的合成线程会错误判定视频图层处于不可见状态，直接跳过视频解码和渲染流程，最终表现为视频播放状态正常但画面完全不显示。

你目前用JS动态设置position的临时方案可以解决问题，还有几种侵入性更低的修复方案可选：

• 给video元素添加transform: translateZ(0)属性，强制触发Safari的GPU图层渲染，不需要修改现有逻辑和其他属性，修改后的代码如下：

  <video style="left: 0;top: 0;height:100%;position:fixed;width: 100%;z-index: -20;transform: translateZ(0);" autoplay loop muted playsinline>
    <source src="视频地址">
  </video>
  

• 给video的父级容器设置非static的position属性，同时设置z-index为正数，也能绕过这个错误的图层判定逻辑
• 该bug已经在Safari 15.1及后续版本被官方修复，如果你的用户群体可以升级浏览器版本，也可以选择不做兼容处理。

你的代码完全符合W3C HTML规范，在Chrome 94.0、Firefox 93.0及更低版本的Safari中都能正常运行，不存在写法错误。

内容的提问来源于stack exchange，提问作者BatDan420