问题

我电脑上的 safari 版本15.6.1 (17613.3.9.1.16) 没有复现

帅帅的 safari 版本 17.4 (19618.1.15.11.12) 可以复现

复现视频：

此处为语雀视频卡片，点击链接查看：IMG_1538.MOV

问题分析：

safari 的视频缩放回来后，页面的层级出现了问题

分析层级

从图片中可以看出三个重要的块

• VideoPlay 视频区域 LiveInfo 下面的直播名称信息
• VideoPlay 和 LiveInfo 是相邻上下的元素
• absolute的进度条 在 VideoPlay 内，通过 bottom 是隐藏在 LiveInfo 下方

img

从出问题的代码上看层级：

video > absolute的进度条 > LiveInfo

img

给对应的元素添加上明确的 z-index 信息

1. VideoPlay 不设置
2. absolute的进度条设置 z-index:1
3. LiveInfo设置： z-index: 2