object-fit: cover causes video to jump in safari

Question

I'm working on a simple example that utilizes the CSS object-fit: cover property on a video element that is wrapped inside a div with specified width and aspect ratio.

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;
}

I noticed that upon loading the page in Safari, the video initially displays at a smaller scale within the div, before jumping to its intended scale and position. I attached a GIF below to show this behavior:

object: fit bug safari

The same code works perfectly well in Chrome and Firefox. I tried specifying the object-position property without success.

Any ideas as to what might be causing this behavior in Safari specifically?

Try adjusting the ratio to 16:9 and remove the height on video. I'd give you a tested and definative answer but I don't have a Mac. — zer00ne, Aug 20 '22 at 15:58
No worries! Just tried changing the aspect ratio, same behavior unfortunately. — Zampus, Aug 20 '22 at 16:08
Ah, I have just updated an iPad from 15.5.1 to 15.6.1 and I see the problem! So, it's something that was changed between those iOS versions. — A Haworth, Aug 21 '22 at 05:18
Does this work: https://codepen.io/saravanapriyanm/pen/eYLJXeK — saravana priyan, Feb 21 '23 at 12:08

JohnValjohn · Answer 1 · 2023-03-02T14:50:41.930

1

Specifying the height (either on the <video> element or in css) seems to solve the problem:

  <body>
    <div id="container">
      <video
        height="500px"
        autoplay
        playsinline
        muted
        loop
        src="https://media.istockphoto.com/videos/slow-motion-rock-on-the-midzor-peak-video-id1248422582"
      ></video>
    </div>
  </body>

edited Mar 02 '23 at 14:50

answered Mar 02 '23 at 14:49

JohnValjohn

11
3

A fixed video height isn't ideal, but it's a solution. My hunch is the browser's rendering engine changed recently. I didn't run into this problem before. A fixed height means the browser knows to reserve 500px of space on initial render. – dwu39 Apr 18 '23 at 23:47

score -2 · Answer 2 · answered Dec 20 '22 at 17:31

To fix min temporarily, I used framer motion to delay the showing of video like this

<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>

You see a delay of 0.4 in the transition property!

But I still don't know how to fix it without delay.

object-fit: cover causes video to jump in safari

2 Answers2