CSS-tag“object-fit：cover”不会裁剪/剪辑Chrome中的视频

css-tag object-fit：封面不会按预期在Chrome中剪辑/裁剪视频.

这仅适用于视频,仅适用于Chrome.
Chrome中的图片没问题.
在所有其他测试的浏览器中,图像和视频都运行良好.

行为应如此图所示(右上角)：

我有created a demo显示错误的行为.

更改浏览器窗口大小时会看到效果.由于高度大,宽度小(以及高度小,宽度大),视频开始重叠,这是错误的.图像不重叠,因此是正确的.

视频(带熊)应划分为50％的屏幕宽度作为图像(屏幕测试图片)：
http://oi68.tinypic.com/x5b3vc.jpg http://oi68.tinypic.com/x5b3vc.jpg

演示代码 –

HTML

<div class="main">
  <div class="container" style="top:0; left:0">
    <video autoplay loop>
      <source src="http://www.w3schools.com/html/movie.mp4" type="video/mp4">
    </video>
  </div>
  <div class="container" style="top:0%; left:50%">
    <video autoplay loop>
      <source src="http://www.w3schools.com/html/movie.mp4" type="video/mp4">
    </video>
  </div>
  <div class="container" style="top:25%; left:0;">
    <video autoplay loop>
      <source src="http://www.w3schools.com/html/movie.mp4" type="video/mp4">
    </video>
  </div>
  <div class="container" style="top:25%; left:50%">
    <video autoplay loop>
      <source src="http://www.w3schools.com/html/movie.mp4" type="video/mp4">
    </video>
  </div>
  <div class="container" style="top:50%; left:0">
    <img src="https://upload.wikimedia.org/wikipedia/commons/c/c4/PM5544_with_non-PAL_signals.png"/>
  </div>
  <div class="container" style="top:50%; left:50%">
    <img src="https://upload.wikimedia.org/wikipedia/commons/c/c4/PM5544_with_non-PAL_signals.png"/>
  </div>
  <div class="container" style="top:75%; left:0">
    <img src="https://upload.wikimedia.org/wikipedia/commons/c/c4/PM5544_with_non-PAL_signals.png"/>
  </div>
  <div class="container" style="top:75%; left:50%">
    <img src="https://upload.wikimedia.org/wikipedia/commons/c/c4/PM5544_with_non-PAL_signals.png"/>
  </div>
</div>

CSS

html,body{
  margin:0;
  padding:0;
  height:100%;
  width:100%;
  overflow:hidden;
}
.main{
  position:relative;
  width: 100%;
  height: 100%;
}
.container{
  position:absolute;
  width:50%;
  height:25%;
}
img,video{
  position: relative;
  object-fit:cover;  /* This is the mainly problematic line*/
  overflow:hidden;
  width:100%;
  height:100%;
}

怎么解决这个问题？

解决方法

Apply -webkit-border-radius：1px;视频作为针对Chrome的错误 https://bugs.chromium.org/p/chromium/issues/detail?id=400829#c31的解决方法