Safari中object-fit: cover导致视频加载跳变的问题咨询

我正在开发一个示例，在指定宽高比的div容器包裹的video元素上使用CSS的object-fit: cover属性。相关代码如下：

HTML代码 #

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>CSS Test</title>
  </head>
  <body>
    <div id="container">
      <video
        autoplay
        playsinline
        muted
        loop
        src="https://media.istockphoto.com/videos/slow-motion-rock-on-the-midzor-peak-video-id1248422582"
      ></video>
    </div>
  </body>
</html>

CSS代码 #

* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  padding: 1rem;
  width: 100%;
  height: 100%;
}
#container {
  width: 500px;
  overflow: hidden;
  aspect-ratio: 1/1;
  border: 1px solid red;
}
video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

在Safari中加载页面时，视频初始会以较小尺寸显示在div内，随后跳转到预期的缩放比例和位置（表现为视频先以原始比例缩小展示，再突然调整为铺满容器的状态）。该代码在Chrome和Firefox中表现正常，尝试添加object-position属性无效，请问Safari中此问题的原因是什么？

问题原因 #

这是Safari浏览器在处理视频元素与aspect-ratio容器组合时的渲染时序差异问题：

• 初始布局阶段：Safari在页面加载初期，会优先基于视频的原始宽高比计算初始显示尺寸，此时容器的aspect-ratio约束还未完全参与到视频的布局计算中，导致视频以原始比例缩小后显示在容器内。
• 后续重排阶段：当视频的元数据（宽高信息）加载完成，或浏览器完成后续的布局校验后，才会正确应用object-fit: cover规则，触发页面重排重绘，视频才会调整到铺满容器的状态，这就造成了视觉上的跳变。

Chrome和Firefox在初始布局时，就会同步结合容器的aspect-ratio和视频的object-fit规则进行渲染，因此不会出现这种跳变问题。而Safari对这两个属性的协同处理逻辑存在滞后，导致了该现象的发生。

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