Zam*_*pus 13 html css safari object-fit
我正在研究一个简单的示例，该示例利用object-fit: cover视频元素上的 CSS 属性，该视频元素包装在具有指定宽度和纵横比的 div 内。
超文本标记语言
<!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 内以较小的比例显示，然后跳转到其预期的比例和位置。我在下面附上了一个 GIF 来展示这种行为：
相同的代码在 Chrome 和 Firefox 中运行得非常好。我尝试指定object-position属性但没有成功。
关于 Safari 中出现这种行为的具体原因有什么想法吗？
Naz*_*riy -2
为了暂时修复 min，我使用帧器运动来延迟视频的显示，如下所示
<AnimationFadeIn initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ duration: 0.3, delay: 0.4 }}>
<video width="100%" height="100%" autoPlay loop muted playsInline>
<source src="/animation-video-3.mov" type="video/mp4; codecs=hvc1" />
<source src="/animation-video-3-vp9-chrome.webm" type="video/webm" />
</video>
</AnimationFadeIn>
您会看到过渡属性延迟了 0.4！
但我仍然不知道如何立即修复它。