Safari: "object-fit: cover" for the first 1-2 <video /> frames turns into "object-fit: contains"

Question

jakub_juszczyk OP

Created Jun ’22

Replies 6

Boosts 2

Views 4.8k

Participants 7

Hello,

I am Flip.Shop developer.

Our site is having a problem displaying a Video whose size adjusts dynamically to the width and height of the parent component.

Please visit this page: https://flip.shop and scroll through a few posts.

On all normal browsers (Chrome/Firefox) the video loads nicely. But on Safari 15.5 (desktop and mobile) you can see a flicker for a while. The first frame of the video can't adjust to the size.

Video component looks like this:

<video
  preload="auto" loop="" playsinline="" webkit-playsinline="" x5-playsinline="" 
  src="blob:https://flip.shop/1039dfe6-a1f4-4f80-822b-250665225c68" autoplay="" 
  style="width: 100%; height: 100%;">
</video>

and CSS of parent component looks like this:

  width: 100%;
  height: 100%;
  position: relative;

  & video {
    object-fit: cover;
  }

Is there any solution to prevent video from going crazy in the Safari browser?

The only workaround that seems to work is to show a poster covering the video until the video plays. Unfortunately, there is no event to inform that Safari is freaking out, so this poster has to be removed after a 300-500 millisecond timeout connected to the "play" event, which significantly delays the display of this video (on Safari).

Boost

Answer 1

aaronreimann OP

Jun ’22

I'm seeing the same issue. In Safari 13 and Chrome it works great.

In 15.5, it snaps and then the video goes full-width.

I need a solution too.

0

Answer 2

MarianoRem OP

Jun ’22

Hi there, I'm having the same in issue in Safari Ipad Pro 5th generation, iOS 15.5. Chrome, Firefox and Safari(desktop & mobile) are working just fine.

0

Answer 3

adam9827349 OP

Jun ’22

Seeing the same behavior in Safari 15.4 and 15.5.

0

Answer 4

ysavoshevich OP

Sep ’22

Same issue in Safari 15.6.

0

Answer 5

oneinchinseam OP

Oct ’22

Ran into the same issue, one workaround is to reimplement object-fit: cover in javascript. which does not glitch.

<div style="overflow: hidden;">
    <video width="1920" height="1080" style="width:100%; height:100%; object-position: top left; transform-origin: top left;">
        <!-- ... -->
    </video>
</div>

<script>
    const VIDEO_WIDTH_PX = 1920.0;
    const VIDEO_HEIGHT_PX = 1080.0;

    window.addEventListener('DOMContentLoaded', event => {
        new ResizeObserver(function () {
            var element = document.getElementById("video");

            var scale;
            var transX, transY;
            if (element.clientWidth / element.clientHeight > VIDEO_WIDTH_PX / VIDEO_HEIGHT_PX) {
                // Screen is wide, so video capped on height.
                height = element.clientHeight;
                width = (VIDEO_WIDTH_PX / VIDEO_HEIGHT_PX) * height;
                scale = element.clientWidth / width;

                transY = (-(scale - 1) * height * 0.5) / scale;
                transX = 0.0;
            } else {
                width = element.clientWidth;
                height = (VIDEO_HEIGHT_PX / VIDEO_WIDTH_PX) * width;
                scale = element.clientHeight / height;

                transY = 0.0;
                transX = (-(scale - 1) * width * 0.5) / scale;
            }

            element.style.transformOrigin = "top left";
            element.style.transform = "scale(" + scale + ") translate(" + transX + "px, " + transY + "px)";
        }).observe(document.getElementById("video"));
    });
</script>

0

Answer 6

gavrilikhin_d OP

Dec ’23

Same issue on Safari 17.0. Any response from Apple?

0