Responsive object-fit: cover fix on Chrome

Question

I know there's others questions about this, but they are old and not updated with the browsers current support. And they not cover the Chrome particular problem with this.

I want a video (I want to do that with image too, but here I'm using a video) occupying 100% the width of the window, but with the container having a limited, specified height. Maintaining video's aspect-ratio (which is very important).

Basically, the object-fit: cover does the job fine here. And in Safari works perfectly, the video upscale/downscale inside his container maintaining aspect-ratio.

In Chrome that happens too, but there's no respect for the height of the container. The element surpasses the height of his container and keep growing to the bottom according to the window's width.

object-fit: fill woks well in both browsers, but the problem here is obvious, the aspect-ratio is not respected, deforming the video/image/etc.

Here's what I have:

HTML

<video preload autoplay loop poster="poster.jpg" id="bgvid">
    <source src="image/video.mp4" type="video/mp4">
</video>

CSS

#bgvid {
  width: 100%;
  min-width: 100%;
  height: 445px;
  max-height: 445px;
  background-color: #f0f0f0;
  object-fit: cover; /* cover works perfectly on Safari */
}

My question is, how can I make this work perfectly respecting the container height (or at least min-height or max-height), responsively in all browsers, keeping the element's aspect-ratio?

---

Answer 1

I've just hit this myself. It looks like if you wrap your video element in a div and set overflow as hidden, then it'll work around Chrome's bug, i.e. something like:

<div class="wrapper">
  <video preload autoplay loop poster="poster.jpg" id="bgvid">
    <source src="image/video.mp4" type="video/mp4">
  </video>
</div>

with css

#bgvid {
  width: 100%;
  height: 100%;
  background-color: #f0f0f0;
  object-fit: cover; /* cover works perfectly on Safari */
}

.wrapper {
  width: 100%;
  min-width: 100%;
  height: 445px;
  max-height: 445px;
  overflow: hidden;
}

I've also just found a couple of issues file that seem to be covering Chrome's bug on this:

• https://code.google.com/p/chromium/issues/detail?id=400829
• https://code.google.com/p/chromium/issues/detail?id=441890

Answer 2

This is a Chrome rendering bug (per the Standard8's response). An alternative fix is to set a small border-radius ('0.5px' used to be the smallest value that works but I just tested in Chrome 65 and '0.1px' seems to work now) on the video element. This forces the element down a different (and apparently less buggy) rendering path within Chrome.

The advantage of this fix is that it doesn't require a "shrink-wrapped cropping element" around the video. The disadvantage is that cropping to a slightly rounded rectangle is probably slightly less performant than cropping to a rect.