Firefox下video标签设为position:absolute时webVTT字幕丢失问题求助

问题根因 #

该问题是Firefox浏览器原生字幕渲染逻辑的实现差异导致的：

• Chromium内核（Chrome、Edge等）的WebVTT字幕渲染层会直接绑定到<video>元素本身作为定位上下文，无论<video>的position属性设置为什么值，字幕坐标都会相对video元素计算，因此不会出现偏移消失的问题。
• Firefox 90+版本调整了原生字幕的定位逻辑：承载字幕的内部匿名容器会优先以<video>的最近非static定位的祖先元素作为定位上下文，当<video>本身设置为position: absolute且未创建独立层叠上下文时，字幕的坐标计算会发生偏移，多数情况下会跑到视口不可见区域，或是被<video>的裁剪规则隐藏。
  你尝试修改VTT文件内的位置参数无效的原因是：原生字幕的全局定位优先级高于VTT文件内的单行位置定义，偏移已经发生在容器层级，单行位置调整无法修正容器级的坐标错误。

无需修改video position属性的解决方案 #

以下方案均不需要调整<video>的position: absolute设置：

• 方案1：给<video>元素添加transform: translate(0, 0)样式，该属性会强制为<video>创建独立的层叠上下文，让Firefox的字幕渲染容器直接绑定到<video>本身作为定位上下文，修复坐标偏移问题，代码示例：

  video {
    position: absolute;
    /* 原有其他样式保留，新增以下属性 */
    transform: translate(0, 0);
  }
  

  该方案改造成本极低，实测兼容Firefox 90+所有版本，不会影响其他浏览器的播放表现。
• 方案2：给<video>元素显式设置overflow: visible，部分场景下<video>的默认overflow: hidden会把偏移后超出容器的字幕裁剪掉，开启后即可正常显示，代码示例：

  video {
    overflow: visible !important;
  }
  

• 方案3：使用JS自定义解析渲染WebVTT字幕，完全绕开浏览器原生字幕的实现差异，自行创建DOM字幕节点挂载到与<video>同级的容器中，自主控制定位规则，该方案兼容性最好，适合对字幕样式有自定义需求的场景。

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