如何删除 Safari 中 HTML5 视频上方/下方的额外空间？

Question

我在 Safari（最新版本、桌面版和移动版）中看到一个奇怪的错误（仅），在 HTML5 视频的上方/下方添加了额外的空间。在某些情况下这可能没问题，但在我的情况下，它显示了用于解决 IE 视频/海报错误的背景图像。

我倾向于认为这是一个 Safari 错误，就好像我在开发工具或 JavaScript 中切换各种 CSS 属性一样，问题就消失了。 JS 方法可能可能是一个解决方案，但用户必须忍受无样式内容的闪烁，我更愿意在 CSS 级别解决或纠正该问题。 （我尝试了各种解决方法：设置视频高度、更改视频显示）

这是相关的 HTML：

<section class="series" style="display: block;">
  <video autoplay="" class="series-video series-video-desktop" loop="" muted="" playsinline="" poster="data:image/gif,AAAA" src="https://iandevlin.com/examples/speechapi-video/video/big-buck-bunny.mp4"
    style="background-image: url(http://fillmurray.com/1024/768);"></video>
</section>

... 和 CSS：

section {
  display: block;
  min-height: 100%;
  width: 100%;
}

video {
  background: none no-repeat 50% 50% transparent;
  background-size: contain;
  display: inline-block;
  height: auto;
  width: 100%;
}

另外，FWIW，这是我的 JS 修复：

window.addEventListener('load', function () {
  var xs = document.querySelectorAll('.series');
  [].slice.call(xs).forEach(function (x) {
    // doing this via CSS has no effect
    x.style.setProperty('display', 'block');
  });
});

JSFiddle

Answer 1

我能够通过将width 替换为min-width 和max-width 来解决上述问题：

video {
  background: none no-repeat 50% 50% transparent;
  background-size: contain;
  display: inline-block;
  height: auto;
  /* width: 100%; */
  min-width: 100%;
  max-width: 999px;
}

Updated Fiddle